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Avant-propos 

Destinee aussi bien aux debutants qu'aux utilisateurs inities, la 
collection Guide Complet repose sur une methode essentiellement 
pratique. Les explications, donnees dans un langage clair et precis, 
s'appuient sur de courts exemples. En fin de chaque chapitre, decouvrez, 
en fonction du sujet, des exercices, une check-list ou une serie de FAQ 
pour repondre a vos questions. 

Vous trouverez dans cette collection les principaux themes de 1'univers 
informatique : materiel, bureautique, prog r animation, nouvelles 
technologies... 

Conventions typographiques 

Afin de faciliter la comprehension des techniques decrites, nous avons 
adopte les conventions typographiques suivantes : 

gras : menu, commande, boite de dialogue, bouton, onglet. 

italique : zone de texte, liste deroulante, case a cocher, bouton 
radio. 

Police baton : Instruction, listing, adresse internet, texte a 
saisir. 

3< : indique un retour a la ligne volontaire du aux contraintes de 
la mise en page. 



rehasoue " s'agit d' informations supplementaires relatives au sujet traite. 
I 



A 



Met 1'accent sur un point important, souvent d'ordre technique qu'il 
ne f'aut negliger a aucun prix. 



astice Propose conseils et trues pratiques. 
I 



DEFINITION 



Donne en quelques lignes la definition d'un terme technique ou d'une 
abreviation. 
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Introduction 

Vous avez enfin decide de creer votre page personnelle sur le Web afin 
de raconter les peripeties de vos dernieres vacances, exposer vos 
competences dans un domaine specifique ou tout simplement creer votre 
album photo en ligne. Inutile desormais d'etre un expert en informatique 
ou un graphiste chevronne pour arriver au bout de votre projet. 

Creer sa page personnelle est devenu une demarche simple grace aux 
nombreux ouvrages et tutoriels en ligne mis a votre disposition. Mais 
faire sortir votre site du lot est une tache plus ardue ! 

De nombreux sites consacres a la creation de site vous aideront a 
decortiquer le langage HTML ou a optimises efficacement vos images. 
Neanmoins, quelques conseils vous eviteront de nombreux ecueils et 
vous permettront de concevoir un site agreable a regarder, compatible 
aussi bien avec Internet Explorer qu'avec Firefox ou Opera et reference 
en bonne position dans les annuaires et moteurs de recherche. 

Pour vous aider a creer votre page web, vous trouverez dans cet ouvrage 
de nombreux conseils de methodologie, simples et efficaces, ainsi que 
toutes les cles pour creer, publier et referencer votre site afin d'eviter le 
syndrome tant redoute du site fantome. 



Qu'est ce qu'un site Internet reussi ? 

Comment reussir son site Internet ? Vaste question, tant le nombre de 
pages web presentes sur le Web (plus de 8 milliards selon le dernier 
referencement de Google en 2005) est impressionnant. Ce chiffre reste a 
nuancer car de nombreux sites sont considered comme obsoletes et 
recoivent peu (voire pas) de visiteurs. 

Parmi les principaux criteres de reussite d'un site, le nombre de visites 
bien sur, mais cela n'est pas suffisant. Un site web reussi se doit 
egalement de proposer un contenu regulierement actualise et d'etre 
accessible au plus grand nombre. 

Si l'internaute doit passer plusieurs minutes a te!6charger les derniers 
plug-ins a la mode pour acceder enfin a votre page d'accueil, il y a de 
fortes chances que celui-ci ferme la fenetre de votre page et aille 
chercher ailleurs Finformation qu'il etait venu trouver chez vous. 
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Meme si le haut debit et les ecrans 17 pouces se generalised, n'oubliez 
jamais que tous les internautes ne beneficient pas forcement de la 
derniere configuration en vogue. Aujourd'hui, la resolution d'ecran la 
plus courante, correspondant a la taille des informations affichees sur 
votre moniteur, reste le 1 024 * 768, meme si de nombreuses cartes 
graphiques montent desormais jusqu'au 1 250 * 768. 

De meme, si le haut debit permet aujourd'hui d'ajouter sans compter 
sons et videos, evitez de charger inutilement votre site. Soignez 
parti culierement la page d'accueil dont la visibility est determinante 
pour 1 'ensemble du site. 



Pourquoi creer son site web ? 

Partager ses photos, sa passion ou son quotidien grace au blog mais 
aussi afficher son CV en ligne dans le cadre d'une recherche d'empLoi, 
voila des raisons de se lancer dans la creation d'un site web. 

Avant de commencer, consultez des sites analogues a celui que vous 
souhaitez proposer, afin de mieux visualiser ses qualites et defauts et 
ainsi reflechir a la facon dont vous pourriez apporter une plus-value et 
un angle different sur votre site web. 

Bien sur, s'il s'agit de creer une page personnelle a destination de vos 
amis et de la famille, le plus important sera d'opter pour une 
presentation simple et exhaustive avec une navigation efficace. Mais 
dans le cas d'un site a destination du grand public, reproduire ce qui est 
deja present sur le Web n'aura guere d'interet et lassera rapidement vos 
internautes. A vous de trouver le "petit plus" qui saura faire la difference 
afin de fideliser vos visiteurs. 



Les differents types de site web 

II existe de multiples types de sites que Ton pourrait grossierement 
divise en deux categories : les sites professionnels et les sites 
personnels. 

Parmi les sites professionnels, on distingue les sites de e-commerce tels 
que ceux des agences de voyage en ligne et autres magasins virtuels, 
parmi lesquels de grandes enseignes traditionnelles ont cree leur site 
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web marchand, mais aussi les sites catalogues ou portails destines a 
presenter une activite commerciale. Ces sites necessitent des 
technologies avancees dites dynamiques pour fonctionner et ne seront 
pas l'objet de cet ouvrage. 

L'objectif de ce livre est de vous aider dans la creation de votre site 
personnel, quel que soit votre niveau en informatique, meme si celui-ci 
se limite a une connaissance basique de l'ordinateur et du traitement de 
texte. 

Grace a cet ouvrage, vous apprendrez a publier votre blog ou votre 
album photo en ligne en quelques heures. En effet, de nombreux outils 
et assistants sont desormais mis a la disposition des webmestres 
debutants qui ne souhaitent pas se plonger dans un code abscons reserve 
aux programmeurs. 

II y a encore quelques annees, creer un site web, meme basique, 
demandait des competences en informatique. Aujourd'hui, grace aux 
nombreux logiciels disponibles sur le marche ainsi qu'aux progres 
realises par les hebergeurs en lignes, quelques clics de souris suffisent 
pour posseder sa page sur le Web. 



Exemples de sites reussis 

II est parfois tentant, lorsqu'on debute dans la creation de site web, de 
vouloir en faire trop : site lourd comprenant un trop grand nombre 
d' images avec des textes tres longs, parfois accompagnes de multiples 
animations qui risquent, au final, de diluer le contenu de votre site. 

N'oubliez jamais qu'un internaute vient generalement chercher une 
information precise lorsqu'il se rend sur un site Internet ; au-dela de 
rrois clics de souris necessaires pour la trouver, il y a des chances pour 
qu'il ferme votre page et parte chercher ailleurs les renseignements qu'il 
souhaitait consulter sur votre page web. 

Avant de se lancer dans la creation de sa propre page web, il est 
conseille de passer du temps a naviguer sur Internet afin de reperer les 
erreurs des webmestres ayant deja publie leur site. Vous eviterez ainsi de 
reproduire les memes erreurs. 
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Quel que soit votre but, CV en ligne ou galerie photo, n'hesitez pas a 
vous rendre sur le moteur de recherche Google - www.google.fr - et a 
saisir les mots-cles lies a la thematique du site que vous voulez creer 
afin de constater les points forts et les points faibles des autres pages 
web. 
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Figure 1 ; Google, un out/7 de choix pour comparer piusieurs sites web 

Si votre site doit proposer un contenu informatif important, n'hesitez pas 
a consulter les sites des grands journaux francais teis que Le Monde - 
www.lemonde.fr - ou 20 minutes - www.20minutes.fr - qui combinent 
habilement une information riche a une ergonomie reussie. 

Meme si ces deux sites web necessitent des moyens techniques 
importants avec serveur web, bases de donnees et langages dynamtques 
pour classer r information et la mettre a jour rapidement, la charte 
graphique de lew page d'accueil, en trois colonnes, reste traditionnelle 
et adaptable a n'importe quel site personnel. 
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De la conception a la publication 



Avant de vous lancer sur votre souris et votre clavier pour creer votre 
page web, il est important de reflechir a la conception de votre futur site 
pour eviter les aleas du webmaster trop presse et oblige de recommencer 
indefmiment la meme page. 

1 .1 . Reussir I'ergonomie generate 
d'un site 

Combien de pages composeront votre site web ? Quelles seront les 
frequences des mises a jour ? Menu simple ou menu hierarchique ? Quel 
type de navigation choisir? Autant de questions a se poser avant de 
foncer tete baissee dans un logiciel de creation de site web. 

Pour definir la structure de votre site, rien ne vaut la page blanche et le 
crayon. Meme s'il s'agit d'un site simple reunissant une dizaine de 
pages tout au plus, cette etape preparatoire vous aidera a anticiper les 
problemes eventuels et vous fera gagner un temps precieux. 

Les qualites d'un bon site web 

Apres une mure reflexion, vous serez a meme de creer un site web 
ergonomique, respectant plusieurs criteres de qualite. Parmi les elements 
les plus importants, on peut notamment citer : 

La sobriete : le site doit etre epure, avec une navigation simple. 
Le debutant est tente de mettre immediatement en pratique tous 
les artifices technologiques appris, des boutons animes et images 
clignotantes. Mais mieux vaut les reserver a un usage bien precis, 
pour mettre en valeur un logo ou une nouveaute notamment, pour 
ne pas noyer le regard de l'internaute qui ne saura plus distinguer 
les informations importantes des autres. 

La clarte, c'est-a-dire la bonne organisation des informations, 
structurees et mises en forme de facon lisible par tous. Lors de 
l' insertion de texte, il faut done veiller a creer des paragraphes 
distincts, a utiliser titres et sous-titres et a faire appel aux styles de 
caracteres (gras, italique..) pour mettre en valeur les elements qui 
doivent ressortir. 

La facilite de navigation, point essentiel qui sera detaille plus loin 
dans ce chapitre. On entend par navigation le passage d'une page 
a r autre d'un site a Faide de liens hypertextes, symbolises 
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general erne nt par un ou plusieurs mots de couleur bleue et 
soulignes. Pour une navigation efficace, il faut respecter la regie 
des trois clics, ce qui signifie que toute information du site doit 
etre accessible en moins de trois clics. 

Le temps de chargement doit etre rapide et inferieur a une 
vingtaine de secondes, quelle que soit la vitesse de connexion de 
Tinternaute. Au-dela, il y a de fortes chances qu'il quitte votre site 
avant meme que la premiere page soit affichee. Meme si parler 
"de poids maximum" pour une page web n'a plus le meme sens 
qu'il y a quelques annees, en raison de l'explosion des 
connexions haut debit, il est important d'eviter d'alourdir 
inutilement les pages d'un site. 

L'interactivite, qui correspond aux interactions mises en place 
entre Tinternaute et le site web : e-mail de contact, forum, 
formulaire. II est important de recueillir les impressions et 
critiques de vos visiteurs pour ameliorer et adapter votre site web. 

L'accessibilite, c'est-a-dire la possibility de visualiser le site web 
sur le plus grand nombre d'ordinateurs par tout type de public, 
quelle que soit la configuration. Navigateurs, resolutions d'ecran, 
systemes d'exploitation, plug-ins eventuels sont autant de 
parametres qu'il vous faudra prendre en compte avant de publier 
une page web pour vous assurer que votre site sera visible par 
tous. 



Une navigation simple et efficace 

La navigation est le coeur de votre site. Une navigation mal pensee et un 
site peu accessible peuvent remettre totalement en cause le succes de 
vos pages web, meme si elles sont esthetiques et riches en informations. 

Rien de pire en effet qu'un site brouillon avec de longues pages sans 
liens et l' impossibility de revenir facilement a la page d'accueil. Des la 
conception du site web, il est primordial de le structurer en menus et 
sous-menus pour s' assurer de la logique de la navigation utilisee. 

Voici quelques conseils pour une navigation reussie : 

A tout moment, l'internaute doit pouvoir revenir a la page 
d'accueil et aux principales rubriques grace a une barre de 
navigation. 
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Les pages d' introduction, avec animations en Flash ou images 
animees, preambules a la page d'accuei], sont inutiles et ont 
tendance a enerver l'internaute, qui perdra inutilement du temps 
lors du chargement, sans acceder aux informations souhaitees. 

Afin que l'internaute puisse se reperer facilement, il est conseille 
de placer systematiquement la barre de navigation au meme 
endroit sur chacune des pages du site, avec une presentation 
identique. 

Si votre site comporte un logo, celui-ci doit etre place au meme 
endroit sur chaque page. II est courant de placer sur le logo un 
lien vers la page d'accueil du site. 

Pour un reperage aise, vous pouvez creer au sein de votre site web 
un plan qui le decrit. II s'agit de mettre a plat, sur une page 
HTML, toutes les rubriques et sous-rubriques de votre site avec 
des liens HTML. Le plan permettra a l'internaute eventuellement 
perdu d' acceder rapidement a la page choisie. 






1.2. Creer la charte graphique 

On appelle charte graphique le "look" des pages d'un site. Couleur, mise 
en page, choix de la police, styles, sont autant de parametres importants 
qui donneront immediatement a Tinternaute Tenvie, ou non, d'aller plus 
loin dans sa visite. 



Kits graphiques ou creation personnelle ? 

Si vous n'etes pas expert en HTML et que l'idee de vous plonger dans 
un editeur web vous donne envie d'abandonner votre projet, les kits 
graphiques sont sans nul doute la solution qu'il vous faut. 

Les kits graphiques sont des interfaces web, payantes ou gratuites, qui 
permettent de proposer rapidement un site esthetique generalement 
realise par un graphiste professionnel pour un moindre cout. 

Selon le kit graphique choisi, il pourra etre utilise a des fins personnelles 
ou commerciales. 

S" Pour plus d 'informations sur V utilisation des kits graphiques, 
renvoi reportez-vous au chapitre Les ressources gratuites du Web. 
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Au debut de l'ere Internet, les cadres HTML (egalement appeles 
"frames") inseres dans les sites web etaient tres a la mode. On divisait la 
page principale en trois ou quatre sections au maximum, chacune 
correspondant a une page HTML distincte. Ainsi, une page d'accueil 
divisee en trois colonnes incluait un cadre HTML pour le menu, un autre 
pour la zone centrale et un dernier pour Pen-tete. 

Le decoupage en cadres est aujourd'hui fortement deconseille. On lui 
prefere une structure en tableau HTML. Le principal inconvenient des 
cadres est Taspect "page perso", qui enleve toute credibilite au site, 
meme si son contenu est de qualite. A cela s'ajoutent des problemes de 
referencement, qui constituent un gros frein a la visibilite des pages 
web. 

Contrairement aux cadres, les tableaux offrent une entiere liberte dans la 
mise en page d'un site et ne posent aucun souci de referencement. lis 
permettent de structurer precisement l'information et sont fiables quel 
que soit le navigateur. Ainsi, vous evitez les mauvaises surprises de mise 
en page selon les versions utilisees par les intemautes. 

Aujourd'hui, de plus en plus de webmasters privilegient les feuilles de 
styles dont Putilisation s'avere toute aussi efficace que les tableaux. Les 
outils de mise en page tels que Dreamweaver proposent pour la plupart 
un panneau dedie aux feuilles de styles afin de faciliter leur integration 
au sein d'une page web. 



Pour plus d' informations sur la creation de tableaux, reportez- 
vous au chapitre Aller plus loin avec Dreamweaver, 



La mise en forme du texte 

Pour proposer un site compatible avec la plupart des plateformes, il est 
important de selectionner des polices visibles par tous et de respecter 
quelques principes de mise en page pour une lecture aisee : 

II est conseille de privilegier une police prise en charge par defaut 
par tous les navigateurs. Parmi les plus courantes, Arial, Tahoma 
ou Verdana sont adaptees a la lecture sur Internet. 
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N'hesitez pas a traquer les fautes d'orthographe, qui enlevent 
toute credibilite a un site si celles-ci se repetent trop souvent. 

Faites attention aux tailles de texte 61ev6es. Utilisez la mise en 
forme (gras, italique,..) uniquement si necessaire, sans 
exageration. 

De preference, n'utilisez que trois polices differentes au 
maximum pour conserver une mise en page homogene. 

Conservez une presentation identique sur toutes les pages. 

Appliquez les couleurs de facon harmonieuse pour ne pas agresser 
l'ceil de l'internaute. Par exemple, 6vitez un texte bleu sur un fond 
noir, qui risque de gener la lecture. 

Evitez egalement les couleurs criardes ou fluorescentes, ainsi que 
les couleurs sombres sur fonds fonces pour conserver une lisibilite 
optimale. 



Un affichage optimise pour tous 

I! est important d'optimiser vos pages web pour qu'elles soient affichees 
correctement sur le plus grand nombre d'ecrans, quelle que soit leur 
resolution. Celle-ci varie selon la carte graphique et la faille de l'ecran 
utilise\ 



Resolution d'ecran 

La resolution d'ecran correspond au nombre de points ou pixels que 
peut afficher une carte graphique. Elle est deftnie par la multiplication du 
nombre de points sur 1'axe horizontal par le nombre de points sur I'axe 
vertical. La plus courante actuellement est 1 024 x 768. 



Compte tenu du pare informatique actuel, optimisez votre site 
pour une resolution de 1 024 x 768 pixels ou plus. Cette valeur 
represente la majorite des ecrans utilises aujourd'hui. Veillez a ce 
que la largeur de vos pages et de vos tableaux ne depassent pas 
I 000 pixels afin que rinternaute n'ait pas besoin d'utiliser les 
barres de defilement. 

Si votre site fait appel a la technologie Flash, integre videos ou 
contenus audio, proposez un lien vers le site de Fediteur afin que 
l'internaute puisse telecharger au besoin le plug-in necessaire a 
une bonne visualisation. 
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1 .3. Les cles d'un bon site web 

Si vous suivez les conseils d'ergonomie enonces precedemment, vous 
eviterez bon nombre des erreurs les plus courantes. Pour faire la 
difference, il reste maintenant a s'attacher au fond. Vous devez proposer 
un contenu riche, apportant une reelle plus-value par rapport aux autres 
sites, et regulierement actualiser vos pages pour donner aux internautes 
Fenvie d'y revenir. 




Eviter les erreurs des autres 

Le site www.ilatoofo.com a decortique de nombreux sites web, personnels 
et commerciaux, aussi bien du point de vue du contenu que du 
contenant, pour souligner les erreurs a ne pas commettre. 
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Figure 1. 1 : Apprenez en evitant les erreurs des autres webmasters sur le 
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Ajouter de I'interactivite 

Pour les diaporamas photo, les journaux en ligne, les forums, les sites 
d'actualite, HTML reste indispensable mais n'est pas toujours suffisant. 

II est facile d'inserer un script JavaScript pret a l'emploi et disponible 
sur Internet, pour afficher la date, ou encore une applet Java, pour 
integrer un jeu en ligne, voire un forum fonde sur une base de donnees 
et le langage PHP, sans pour autant maitriser ces differents langages. 

Pour etre moins perdu face aux nombreux termes que vous ne 
manquerez pas de croiser lors de la creation de votre site web, voici un 
petit point sur les principales technologies utilisees et leurs applications 
pratiques : 



Pour plus d' informations sur Vajout d'interactivite au sein 
d'un site web, reportez-vous au chapitre Les ressources 
gratuites du Web. 

JavaScript : langage souvent utilise dans les pages web pour creer 
de petits scripts qui inserent l'heure et la date, ouvrent une 
nouvelle fenetre, introduisent des effets speciaux sur des 
images, etc. 

Applet Java : egalement appelees "appliquettes". II s'agit de petits 
programmes (principalement des jeux ou des modules de chat) 
utilises dans les pages web et qui peuvent etre telecharges et 
interpreter par un navigateur Internet tel que Firefox ou Internet 
Explorer. 

PHP : langage execute par le serveur web, qui permet d' ajouter 
des fonctions avancees a un site Internet, de creer des applications 
plus ou moins complexes, telles que forums, modules de 
newsletter ou livres d'or. Pour utiliser PHP, il est indispensable 
que cette technologie soit reconnue par le serveur web. 



RENVOI 



Pour plus d* informations sur Vinsertion de scripts prets a 
l'emploi, reportez-vous au chapitre Les ressources gratuites du 
Web. 
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Figure 1.2 : Le s/ts Commentcamarche definit simplement de nombreux 
termes informatiques 



Decrypter le jargon Internet 

Si vous etes perdu face aux multiples termes qui jalonnent la creation 
de sites web, consultez le site Web Commentcamarche, a. l'adresse 
www.commentcamarclie.iiet. Ce site decrypte les principaux termes que 
vous trouverez lors de votre apprentissage informatique. Le vocabulaire 
est accessible a tous. 



Choisir un bon hebergeur 

L' hebergeur est la societe chargee d'administrer les serveurs sur lesquels 
seront publiees vos pages web pour etre visibles sur Internet. Apres 
avoir travaille sur votre site depuis votre ordinateur, vous devrez 
l'envoyer sur un serveur. 
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Pour choisir un hebergeur, prenez en compte plusieurs criteres : 

Adresse web : certains hebergeurs proposent la reservation de 
noms de domaines, d'autres offrent des adresses plus difficiles a 
retenir, du type http://identifiant.nomhebregeur.com. Avant tout, 
reflechissez a r adresse que vous souhaitez donner a votre site 
web. Pour une image serieuse et professionnelle, une adresse du 
type www.monsite.com est conseillee et sera egalement plus facile a 
memorises 

Espace disque disponible : exprime generalement en megaoctets 
ou gigaoctets. Pour vous donner un point de repere, sachez qu'une 
video pese entre 1 et 5 Mo et qu'une dizaine d' images necessitent 
un espace disque d' environ 1 Mo. Si vous souhaitez privilegier le 
texte, vous n'aurez pas besoin d'un espace disque important, et 
inversement si vous comptez proposer beaucoup de contenu 
multimedia. 

Scripts et technologie : PHP, CGI, ASP, etc. Si vous souhaitez 
utiliser des scripts, il est important d'etre attentif aux technologies 
supportees par votre hebergeur. Meme si vous ne connaissez pas 
ces langages, vous serez susceptible de les utiliser via de 
nombreux scripts prets a Pemploi. Privilegiez les serveurs web 
prenant en charge PHP et eventuellement la base de donnees 
MySQL pour integrer facilement, par la suite, de nouvelles 
fonctions a vos pages web. 






Pour plus (['informations sur le choix d'un hebergement, 
reportez-vous au chapitre Publier et promouvoir un site web. 

Adresse e-mail : certains hebergeurs fournissent une adresse 
e-mail et stockent les messages au sein du serveur web, tandis que 
d'autres proposent un simple renvoi vers votre adresse e-mail. 



Reserver un nom de domaine 

Un nom de domaine correspond a Padresse d'un site Internet. Par 
exemple, dans www.yahoo.fr, yahoo.fr represente le nom de domaine. 

II existe de multiples extensions (.com, .fr, .net, .biz...) que vous pourrez 
choisir selon la nature de votre site (personnel, associatif, 
commercial...). S'il s'agit d'un site commercial, .com et .fr s'imposent. 
Pour un site associatif, vous pourrez opter pour .org (diminutif 
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d'"organisation"). De plus, selon P extension souhaitee, le prix peut etre 
plus ou moins eleve. Actuellement, les extensions .com et .fr sont les plus 
demandees done les plus cheres. 

Neanmoins, acheter un nom de domaine est simple et reste a la portee de 
toutes les bourses (a partir de 6 euros par an). De plus, il s'agit d'un 
achat qui sera vite rentabilise si vous avez choisi la bonne adresse, 
courte, facile a orthographier et a retenir. 

Pour acheter un nom de domaine, il n'existe aucune regie particuliere, si 
ce n'est que le premier arrive est toujours le premier servi. Ainsi, si vous 
souhaitez creer un site web consacre a James Dean, rien ne vous 
empeche d' acheter le nom JamesDean.com dans la mesure ou celui-ci est 
toujours disponible, ou de tenter votre chance avec d'autres extensions 
le cas echeant (.net, .org...). Notez qu'un nom de domaine ne contient 
jamais d'espace. 

Aujourd'hui, de nombreux hebergeurs proposent egalement un pack 
incluant P achat d'un nom de domaine. Les formalites de mise en service 
en sont facilities. Aussi n'hesitez pas a proflter d'un pack 
hebergement + nom de domaine, accessible a un prix plus interessant. 



RENVOI 



Pour plus d'informations sur la reservation de noms de 
domaines, reportez-vous au chapitre Publier et promouvoir un 
site web. 
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Creer son blog en ligne 



Le blog (en franfais journal web ou carnet web) se caracterise par une 
interface d' administration accessible depuis n'importe quel ordinateur 
connecte a Internet, que vous soyez a votre bureau ou dans un cybercafe 
de Tokyo. 

Vous pouvez done mettre a jour facilement et rapidement un blog sans 
acheter de logiciels d'edition web ou d' applications de retouche 
damages. Le succes du blog tient a son faible cotit et a sa facilite 
d'utilisation due a la simplicite des outils de publication proposes. La 
prise en main de ces derniers est en effet tres proche du traitement de 
texte. 

Le blog est un support interactif, e'est-a-dire que les internautes peuvent 
y poster des commentaires relatifs aux articles publies. Ces 
commentaires apparaissent generalement immediatement en ligne et 
peuvent etre geres ensuite au sein de l'interface d' administration. 

Contrairement au site web, la structure d'un blog reste globalement 
semblable, quel que soit le theme aborde. Le blog est constitue d'articles 
classes par ordre chronologique inverse (du plus recent au plus ancien) 
sur la page d'accueil. 



2.1. Choisirsa eommunaute 

Afin de creer facilement votre blog, vous devez selectionner une 
plate-forme destinee a heberger et a creer votre blog. 

La eommunaute de blog offre l'avantage de fournir des outils prets a 
l'emploi pour une publication immediate de votre blog. Elle draine tres 
rapidement de nouveaux visiteurs et auteurs de blogs de la meme 
eommunaute. 

En effet, le blog cree au sein d'une eommunaute comprend 
generalement un annuaire destine a mettre en avant les sites crees avec 
le meme outil. Neanmoins, selon les communautes, l'interface du blog 
sera limitee (aspect graphique, obligation de mises a jour regulieres sous 
peine de publicites intempestives, etc.), il est done primordial de definir 
le type de blog dont vous avez besoin. 
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Une liste non exhaustive de plates-formes de blog est 
disponible an chapitre 11, Webographie. 
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Quel blogger etes-vous ? 



Journal intime, audio blog, video blog ou photo blog, avant de choisir 
I'hebergeur de votre blog, reflechissez au site que vous souhaitez creer 
car certaines communautes disposent d'outils specialement dedies. 

Avant de vous lancer dans l'ouverture de votre blog, etudiez les points 
suivants : 

Profit de la eommunaute : Si vous souhaitez partager sur votre blog 
votre passion pour un sujet specifique, verifiez que la plate-forme 
choisie propose d'autres blogs sur ce theme afin d'attirer 
rapidement des visiteurs sur le site nouvellement cree. Si la 
eommunaute choisie dispose de sites au contenu complementaire 
au votre, vous pourrez beneficier plus facilement de publicite ou 
realiser des 6changes de liens. 

i interface graphique : Selon les communautes, la personnalisation 
de l'interface est plus ou moins poussee. Certains sites vous 
laisseront carte blanche et vous permettront de modifier 
integralement l'interface de votre site a partir d'une feuille de 
style ; d'autres favoriseront les interfaces cles en main dont vous 
pourrez eventuellement personnaliser quelques couleurs. 

Fonctionnalites offertes : Gestion d 1 albums photo, insertion de sons 
ou de videos, mise a jour via son tel6phone portable, limitation du 
trafic, presence d'un outil de referencement interne, statistiques... 
A vous de definir vos priorites afin de choisir l'outil le mieux 
adapte" a vos besoins. 

Cout : Si de nombreuses communautes affichent en premiere page 
leur gratuite, il s'avere souvent necessaire de lire entre les lignes 
afin de traquer les couts caches. II est notamment frequent que 
l'espace propose soit limite a quelques m£gaoctets puis payant 
au-dela d'un certain seuiL Si vous envisagez de proposer 
majoritairement des medias de type video ou son, cette solution 
risque de devenir rapidement tres onereuse. A verifier avant de 
vous lancer... 



Gratuit ou payant 

Selon le site c hoi si, l'ouverture d'un blog peut etre gratuite ou pay ante. 
Si vous souhaitez vous "faire la main" et mieux cerner les avantages et 
les inconvenients du blog, les outils gratuits constituent une bonne 
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alternative, meme s*il est frequent qu'en echange, vous soyez dans 
I' obligation d' accepter de la publicite au sein de vos pages. 

Par contre, si vous souhaitez creer un blog a vocation plus serieuse et 
d'aspect professionnel, il vous en coutera quelques euros (environ 5 a 
10€/mois selon les services) afin de vous assurer une bande passante 
suffisante pour recevoir vos visiteurs et acheter eventuellement un nom 
de domaine. 



REMARQUE 



Le phenomena blog 

Pour en savoir plus sur le phenomene du blog, rendez-vous sur le 
magazine en ligne Pointblog, a l'adresse www.pointblog.com. Vous y 
trouverez des informations mises a jour quotidiennement et de 
nombreuses adresses de blogs a decouvrir. 



RENVOI 



Pour obtenir davantage d* informations sur Vachat de nom de 
domaine, reportez-vous au chapitre 10, Publier et promouvoir 
son site web. 



Les blogs thematiques 

Si vous etes amoureux du jardinage ou passionne de modelisme, vous 
aurez interet a publier votre blog au sein d'une communaute proposant 
deja des sites abordant ces differents sujets, afin de partager vos centres 
d' interet avec d'autres amateurs eclaires. 

La plupart des hebergeurs de blog proposent au sein de leur site un 
annuaire destine a recenser les blogs publies par themes. Avant de vous 
lancer dans Laventure du blog, passez quelques minutes a naviguer au 
sein des sites crees par les autres bloggeurs. Vous pourrez ainsi evaluer 
la qualite des sites represented et mieux visualiser les possibilites 
offertes par l'hebergeur de blog (voir Figure 2.1). 



HEHMQUL 



Les annuaires de blog 

Les annuaires de blog ont pousse comrae des champignons. D'autres 
hebergeurs de blogs ont egalement leur annuaire, tel qu'Over-Blog, a 
l'adresse www.over-blog .com ou 20six, a l'adresse www.20six.fr. 
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Blog : Maison et Decoration 



Fikre p»r otiqorit [Mais-on et Prestation yj 



P*g«122i56.ZS21fi ► ►► 



www.mldielB-couDS-dB-coeur.com (24/12/2005) 

L'univerr d'une brode/use, «ntr* selection et decoration, patchwork at traveux 
d'aiguilles, fill . tl* sis « dent* lies 

Lclilpq de *v1* (22/10/2005) 

Le Blooj de vj . 30 ins passe, un petit gar^on adorable, une vie bien remplie de maman 
de'borde'e, des ide'*s plain la tete (broderie. couture, decoration), des aiguilles au bout 
des dolgti et des jo-urn its blen trop courtes! 

La maison cassfee (31/10/2005) 

Rinovation de ma ruin* de A a 2 (gros oeuvrt, charptntt, e-suveiture, 
isolation... .......) 



Laura blog (24/06/2005) 

Du cote' de chei Laura 
BrQdStltCh (21/03/2006) 

Paint de crOiH et autre points de broda 
POPCroSS (07/03/2005) 



Point de eroiw, brodarie tradiriorinelle, grille gratuice, loisirs ereaOfs, voyage • 
musique 



Figure 2.1 : L'annuaire de blogs du site Over-Blag 



2.2. Publication express avec Blogger 

Afin de debuter dans la creation de blog, nous avons choisi d'aborder 
dans ce chapitre la creation de site avec Blogger, selectionne pour sa 
simplicite d'emploi. 

Le site Blogger propose des modeles d'interface agreables a l'oeil et 
permet de publier son blog avec texte et images en quelques minutes, le 
tout gratuitement et sans bannieres publicitaires. Seule condition, 
accepter le logo du site en bas de vos pages. 
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La creation d'un blog avec B logger se deroule en trois etapes : 

inscription et ouverture d'un compte ; 

selection d'un identifiant et creation d'une adresse pour votre blog ; 

! choix d'un modele d' interface correspondant a la charte 
graphique de votre blog. 

Inscription a Blogger 

Ouvrez votre navigateur Internet et rendez-vous sur le site de Blogger, a 
1' adresse www.blogger.com. Afin de publier votre blog, vous devez creer un 
nouveau compte. L' identification se deroulera ensuite sur la page d'accueil 
de Blogger depuis n'importe quel ordinateur connecte a Internet. 

Ouvrir un compte 

1 Sur la page d'accueil de Blogger, cliquez sur le bouton CREER 
VOTRE BLOG. La premiere etape consiste a creer un compte. 




D^eouvrir del blog; 



■loci im « hwi IT TO 111 111 vi "ii "tliwi ... 


r">.'.»,IU 


tLDtt All IK Ml' 







Qu"e:t-ce qu'uri blog 



£ 



Donn«i Echjn|*i Envoyev Bl 

»»trv J 



Creez un blog en 3 

etapes : 

^ Crta un compL* 

^P Nommez voire blog 
>lou»r 
imbM «| Cholsi:sezur> module 



Mi' Mfcg *u uri'LU .MtiCdnvMtf, qui vsih ptrmtl fa dorter 

rapidemwt votre jvi» sur urnujo*. qji v<wi iiwitjcraur, 

d'echinge* fat lewc jv«? d'autrw intMnautec el bwn plus enco™ 

U c "«1 ftl-mnl 



I iMfcKn tv i MMMH < witml 1 *«W InrrttAjCfd lM»» 
4«e ^utse lie.lbMy V*- no«d. 



' 



( j) 



new ewp tKm »w«i 

- .■-■ | l-..- l :■;: m 



■ 



Figure 2.2 : La creation gratuite de blog avec Blogger 
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Indiquez d'abord un nom d'utilisateur et un mot de passe 
necessaires pour acceder ulterieurement a l' interface 
d'administration de votre blog. 

Entrez le nom d'affichage, c'est-a-dire le nom qui sera utilise pour 
signer les articles de votre blog ainsi qu'une adresse email valide, 
indispensable pour confirmer l'enregistrement de votre compte. 

N'oubliez pas de cocher la case J'accepte les conditions 
d'utilisation afin de valider votre inscription puis cliquez sur le 
bouton CONTINUER. 



© Blogger 



CRtEZ Mil COMPTE 



Q Creez un compte 



ChoKisser un ivoni 
(TulilluUUI 


koiineOB 




MojnoiKWusiif*' 


Enttw un moi de psss* 






Doitoompoite>*j i 
carac teres. 


Confiimez lemol de 
passe 


pa 




Entrez da nouvoau le mot de 

passe. 


Modi iTafJkhagt 


CemelauJapwi 




Nom utiite pour £i<Bwr let 
rM!sas<;de votre ptjg 


I'.ili--,'..- e-mail 


koiiri e06@hotmail.com 


Now nocoiranumqutron: 
nouns mi* re odiesse a de; 
tier: Ems votre accord, 


Coiidttisnj T'lii'i ati ii 


S SteMpte i« 


<«ndrtifriii d'uilllMlMn 


IMrquer tfw wjus sue; U et 
corns 1 8 « « jodrt»(M 
ofut-rtsatkxi de Plow*'. 



Figure 2.3 : Ouverture d'un compte sur Blogger 



REMARQUE 



Creer plusieurs blogs sur Blogger 

Vous pouvez creer plusieurs blogs distincts avec un seul compte. 
Apres vous etre connecte avec votre identifiant et votre mot de passe, 
vous pourrez acceder a vos differents blogs depuis le tableau de bord 
correspondant a l'interface d'administration de Blogger. 
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Definir I'adresse du blog 

1 La deuxieme etape apparait a l'ecran, il s'agit de nommer votre 
blog. Entrez un titre (par exemple CV, album photos, etc.) ainsi 
que son adresse. Choisissez un nom facile a retenir et lie au theme 
de votre blog. Afin de vous assurer que le nom selectionne n'a pas 
ete deja pris, ecrivez-le dans la case correspondante puis cliquez 
sur le lien Verifier la disponibilite. 



& Blogger 



HOMMEZ VOIRE BLOG 



Q Nommez votre blog 



Tilie du blog 



Adless* <)u btogl 

Uftt.) 



Camel de voyage au Jap on 

hup;// Voyage Japan ,bla 

Yetdiei U dwpombiln. 

Cette tdVesse de bios esl dtsponiblc. 



V.nli. .il ion cU-s inoli 



OU 

toiiflgwMWn avancec 



kki 



EnttezbtmeOovotrottog. 

WrKW vous penrneuamt , et 

rrteinautes^craccaoer 4 
votre Wog. 



IKni Us ear««i« qui 
apparoisrrnt *=ns filiate. 



Vous souhs'tez que voire blog soil beb«rge > un julr-e eitijtlscemom ? 
Consultez la page Conlituratioti «anceq du bloc. Vous pourrez alral fair 
heberger vstre blog sur un sutre serveur que Blogspot. 



( / 



Figure 8.4 : Definition des options du blog 

2 Afin de poursuivre l'etape d' inscription, recopiez dans la case 
Verification des mots les lettres inscrites dans 1'image puis cliquez 
sur le bouton CONTINUER. 



Choisir une interface graphique 

1 L'dtape suivante consiste a choisir un modele parmi les douze 
interfaces a votre disposition. Contrairement a d'autres plates- 
formes de blogs, les modeles proposes sont de bon gout et 
peuvent s'appliquer aussi bien a des sites a vocation personnelle 
que professionnelle. 
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Afin d'obtenir un apercu en taille reelle au sein du navigateur 
Internet, cliquez sur le lien Previsualiser le modele. 

Lorsque vous avez choisi un modele, cochez le bouton radio situe 
devant son nom. Dans cet exemple, le modele Snapshot a ete 
selectionne. Cliquez sur le bouton CONTINUER afin de valider 
votre choix. 



6 Blogger 



N'SMME! VOTO B |t) CHOBRSEZ UN M.OOELE 



^J Choisissez un modele 




Figure 8.5 : Selection d'un modele d'interface 

Un message de confirmation apparait pour vous informer de la 
creation de votre blog. Cliquez sur le bouton Publier des 
messages afin d'ajouter un premier article a votre blog. 
L'interface de publication de messages s"affiche a l'ecran. 



Publier son premier message en ligne 

Un blog sans messages s'apparente a un journal sans textes ni images. A 
l'aide de l'interface d' administration du site Blogger nomme Tableau 
de bord, vous allez pouvoir inserer de nombreux articles qui incluent 
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textes et photos afin de partager sur Internet votre passion ou tout 
simplement votre humeur du jour. 

Mise en forme de texte 

1 Afin de creer votre premier message, indiquez d'abord un titre a 
votre article dans la case Titre. La barre d'outils mise a votre 
disposition permet de formater votre texte en y ajoutant de 
nouveaux styles : gras, italique, couleurs de texte, listes a puce. 

2 Ecrivez votre article au sein de la zone de texte. La mise en forme 
d'un article est analogue a celle d'un texte dans un traitement de 
texte. Selectionnez votre texte puis modifiez police et style a 
l'aide des boutons mis a votre disposition dans la barre d'outils. 



Afficher la fonction des boutons de la barre de menu 

En maintenant votre souris quelques secondes sur chacun des elements 
de la barre de menu, la fonction s'affiche automatiquement dans une 
infobulle. 



Par exemple, pour ajouter un style gras a un mot ou un groupe de 
mots, selectionnez-le en maintenant le bouton de la souris 
enfonce. La selection apparait en surbrillance. 

Cliquez sur le bouton de style Gras dans la barre d'outils pour 
appliquer ce style a votre paragraphe. 



6 Carnet de voyage au Japon 



!Bet«|fcaTofa» "I 



1 = :: U «| a Prrt*. 



Quatrei jaura pttst* i T«lti>» p, nr vww h> (wwipa us <t imrlitr* ; 

» Glnza, lea Champs-Elyseesjaponoie avec magasins de luxe et tours de verre a chaquc 
da rue 

* U«no « son pare Bwtogique, viriuNe poumon d* U villa 

* Shinjuku, lequArticretucUam par earellence. relict de la mode dejance* des ieune* 
japcauiaj 



■~"-t"i*^« 



Figure 2.6 : 

Mise en forme d'un 
article cree avec 
Blogger 
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ASTUCE 



Gagner du temps avec les raccourcis clavier 

Apres vous etre familiarise avec Tinterface de Blogger, vous pourrez 
mettre en forme plus rapidement vos articles en faisant appel aux 
raccourcis clavier. Analogues a ceux utilises dans Word, V application du 
style gras se fait par exemple en selectionnant d'abord le t erm e a mettre 
en forme puis en appuyant sur la combinaison de touches [Ctrl ! +[§]. 

Afin d' afficher la totalite des raccourcis clavier disponibles dans Blogger 
pour la publication de vos articles, rendez-vous a l'adresse suivante : 
http://help.blogger.com/bin/answer.py?answer=42197. 



5 Pour modifier la police et la taille du texte, selectionnez votre 
texte puis choisissez la police de votre choix dans la liste 
deYoulante Police et sa taille dans la liste deroulante Taille. 

6 Afin d' ajouter des listes a puces, placez le curseur devant le mot 
oii la puce doit etre inseree. Cliquez sur l'icone Liste a puces ou 
Liste numerotee puis faites un retour a la ligne en appuyant sur la 
touche 0. 

7 Votre puce s'affiche devant le mot choisi. Afin de poursuivre la 
creation de la liste a puces, appuyez de nouveau sur la touche {^}. 
Si vous souhaitez sauter une ligne sans inserer de puce, appuyez 
sur la combinaison de touches [Majl +f^l. 



ASTUCE 



Annuler rapidement la derniere action 

Si vous souhaitez annuler rapidement la derniere mise en forme, 
utilisez la combinaison de touches Ictrlt +fz), 



Inserer des liens 

1 Afin d'inserer un lien vers un site web ou un adresse email, 
selectionnez un mot ou un groupe de mots puis cliquez sur l'icone 

Associer. 

2 La fenetre Lien apparait a l'ecran. Selectionnez dans la liste 
deroulante Type le type de lien a inserer. Deux types de liens sont 
majoritairement utilises : 

_ http:// s' utilise pour un site web, par exemple http://www.yahoo.fr. 



LE GUIDE COMPLET 



41 



Chapitre 2 



Creer son blog en ligne 



— mailto s' utilise pour une adresse mail, par exemple 
mailto:karine@hotmail.com. 

3 Le champ URL est automatiquement mis a jour selon le type 
selectionne. Ecrivez F adresse de votre site web ou Fadresse email 
puis cliquez sur le bouton OK, 



a 





Fort v J MonratSoe v | \y j TJj 1 *p 1 f 

RAcuD^ftr le message 


Ill \_Z \z ii >*>J i? Pravtgw 








Quaeres jours passes a Si s!S pour visiter les pr 
• Ginza, les Champs-Elys£es japonais avec 


ncipaux quartiers : 












• Ueno et son pare aoologique, veritable po 

• Shinjuku, Le quartier etudiant par excel] 
japonais. 


-j Enter a URL: 




h*tD://wmv.tokyo.coro| \ 








| OK | | ftn* | 













Figure 2. 7 ; Creation d'un lien hypertexte 

Votre lien apparait au sein de votre texte. II est par defaut de 
couleur bleu et souligne dans Finterface d' administration mais 
selon le modele graphique selectionne, il peut egalement 
apparaitre d'une couleur differente dans le navigateur web. II reste 
souligne. 

Si vous cliquez sur le lien, rien ne se passe pour le moment car 
vous etes toujours dans Finterface d'administration. II ne sera 
valide qu'une fois votre article publie en ligne et visible dans un 
navigateur Internet. 



Ajouter des images 

1 Pour ajouter une image, cliquez sur Fieone Ajouter une image. 
Placez votre curseur a Fendroit ou vous souhaitez inserer F image. 

2 La fenetre Envoyer une image s'affiche a Fecran. Si vous 
souhaitez inserer une image issue de votre ordinateur, cliquez sur 
le bouton Parcourir. Pour inserer une image situee sur un autre 
site web, indiquez son adresse dans la case URL. 



ASTUCE 



Connaitre le poids d'une image 

Cliquez du bouton droit sur l'image puis selectionnez la commande 
Proprietes. Une nouvelle fenetre apparatt, vous permettant de connaitre 
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la taille/le poids du fichier. Evitez d' inserer des images avec un 

AS-IULt 

poids superieur a 100 kilooctets arm de ne pas alourdir inutilement 

vos pages. 



Specifiez F emplacement de F image par rapport au texte (gauche, 
droite ou centre) en cochant le bouton radio correspondant ainsi 
qu'une taille d' image puis cliquez sur le bouton Envoyer une 
image. Si vous souhaitez qu'a chaque insertion d'image, les 
parametres entres soient dermis par defaut, cochez la case Utiliser 
cette disposition a chaque fois. 

Selon le poids de l'image insere et la vitesse de votre connexion 
(bas debit ou haut debit), le chargement peut etre immediat ou 
durer quelques secondes. 

Lorsque l'image a ete chargee, un message de confirmation 
apparait. Cliquez sur le bouton Termine. L'image s'affiche au sein 
de votre article a F emplacement specifie. 



BoladeaTokyo 
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Modifier to code HTML 
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Figure 2.8 : Apercu de l'image dans /'article 



£g Inserer un sondage, un moteur de recherche, partager ses 
Piwoi favoris, autant de fonctionnalites proposees gratuitement sur de 
nombreux sites Internet afin de rendre votre blog encore plus 
interactif. Pour davantage d' informations, reportez-vous au 
chapitre 11 : Webographie. 
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Enregistrer I'article 

1 L'image s'affiche dans la zone de texte. Afin de visualiser votre 
article en ligne, cliquez sur le bouton Publier le message. 

2 Pour 1' enregistrer et y revenir ulterieurement, cliquez sur le 
bouton Enregistrer en mode brouillon. 

3 Un message vous informe que I'article a ete correctement publie. 
Cliquez sur le lien Afficher le blog afin de voir votre blog en ligne. 
L'article apparait au sein de 1'interface choisie. 

4 Desormais, votre blog est accessible a tous. II suffit de 
communiquer son adresse, du type http://nomdllblog.blOgSpOt.COni. 

5 Par defaut, les intitules de rubrique et certains liens sont en 
anglais, mais la section suivante vous permettra de les traduire en 
franfais. Si vous souhaitez revenir a 1'interface d'administration 
du blog> cliquez sur le lien Edit me (Edition). 
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Figure 2.9 : Publication en ligne du blog 
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2.3. Aller plus loin dans la gestion 
de son blog 

Le tableau de bord correspond a 1'interface d'administration de votre 
blog. Pour y acceder apres avoir cree votre compte, cliquez sur le 
bouton Blogger situe au sein de votre blog ou entrez dans votre 
navigateur l'adresse du site, e'est-a-dire www.blogger.com. 

Acceder au tableau de bord 



1 Par deTaut, Blogger enregistre automatiquement vos identifiants, a 
condition que les cookies soient acceptes par votre navigateur. 



ATTENTION 



Autoriser la gestion des cookies 

Les cookies sont de petits fichiers texte utilises par un site web afin de 
vous identifier automatiquement a chaque connexion au site Blogger, 
Pour des raisons de securite, les cookies peuvent etre desactives au sein 
d' Internet Explorer. Pour autoriser les cookies, selectionnez le menu 
Outi Is/Options Internet. Cliquez sur 1'onglct Confidentialites et abaissez 
le curseur au plus bas afin d'accepter les cookies. Pour appliquer les 
modifications, cliquez sur le bouton OK. 



Si votre identifiant et votre mot n'ont pas ete automatiquement 
enregistres, identifiez-vous, e'est-a-dire entrez le nom 
d'utilisateur et le mot de passe specifies lors de V inscription afin 
d'etre reconnu par le site en cliquant sur le lien Sign in to Blogger 
(Se connecter a Blogger) situe en haut a droite. 

Votre tableau de bord s'affiche a l'ecran et va vous permettre de 
parametrer plus en detail votre blog. Cliquez sur le nom de votre 
blog dans la colonne NOM DU BLOG (voir Figure 2.10). 



Archiver vos images 

Afin de rechercher d'anciens messages, vous pouvez faire appel a la 
fo net ion d'archivage de Blogger. Au sein du tableau de bord, activez 
l'onglet Parametres puis cliquez sur le lien Archivage. Vous pouvez opter 
pour un archivage mensuel, hebdomadaire ou quotidien. 
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6 Blogger 



Tableau de bord 
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figure 2.10 : Le tableau de bord de Blogger 



Afficher I'heure et la date en francais 

Blogger affiche dans ses pages par defaut un melange de termes anglais 
et francais qui n'est pas toujours tres agreable a lire. Afin d'uniformiser 
V interface, vous devez changer la langue par defaut : 

1 La configuration par defaut de Blogger affiche la date en anglais. 
Activez 1'onglet Parametres et cliquez sur le lien Mise en forme. II 
vous suffit maintenant de modifier les options grace au formulaire 
mis a votre disposition. 
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Choisissez un format de date (en toutes lettres, en chiffres, en 
abrege, etc.). Modifiez le fuseau horaire en selectionnant 
Europe/Paris en remplacement du fuseau horaire americain 
attribue par defaut. 

Dans la liste deroulante Langue des dates, choisissez French 
(France) et modifiez le format d'en-tete des dates. Validez par un 
die sur le bouton Enregistrer les parametres. 



d Car net de voyage au Japon 



Envoi J Parametre; I Mode to Afficher le blog | 
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Figure 2.11 : Traduction de /'interface en francais 

4 Afin que les nouveaux parametres soient pris en compte, vous 
devez publier de nouveau votre blog. Cliquez sur le bouton 
Republier accessible depuis le message de confirmation de bonne 
prise en compte des nouveaux parametres. 
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5 Cliquez sur le lien Afficher le blog. La date apparatt en francais. Si 
vous avez choisi cT afficher l'heure, celle-ci apparait egalement. 



Editer les informations de votre profil 

1 Par defaut lors de la publication de votre blog, des informations 
liees a votre profil (prenom, adresse...) sont visibles en ligne. 

2 Vous pouvez acceder a 1' edition de votre profil et supprimer la 
publication de ces informations dans votre blog en cliquant sur le 
lien Modifier le profil situe sur la page d'accueil du tableau de bord. 
La fenetre Modifier le profil utilisateur s'affiche a 1'ecran. 
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Figure 2. 12 : Modification du profil 

Afin que votre profil soit visible sur votre site, cochez la case 
Partager mon profil. Si vous souhaitez afficher votre nom et votre 
adresse email sur votre blog, cochez les cases Afficher mon vrai 
nom et Afficher mon adresse email. Afin d'eviter les spams, il est 
neanmoins deconseille de cocher ces options. 

Afin d'enrichir votre presentation, vous pouvez egalement ajouter 
une photo situee sur votre ordinateur ou entrer vos centres 
d'interet afin que les visiteurs de votre site puissent mieux vous 
connaitre. 

Pour entrer de nouvelles informations sur votre profil, remplissez 
les champs livres preferes, gouts preferes... N'oubliez pas qu'une 
fois visible sur Internet, ces informations pourront etre utilisees 
pour vous envoyer de la publicite ou des messages indesirables. 
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Figure 2. 13 : Edition du profil 



Changer de mot de passe 

1 Depuis la page d'accueil du tableau de bord, vous pouvez a tout 
moment modifier le mot de passe choisi lors de 1' inscription. 
Cliquez pour cela sur le lien Modifier le mot de passe situe dans la 
colonne de droite. 
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Figure 2,14 : 

Modification du mot de passe 
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2 Entrez le mot de passe actuel puis le nouveau mot de passe que 
vous devrez confirmer une deuxieme fois. Cliquez sur le bouton 
Enregistrer les modifications afin de sauvegarder le nouveau mot 
de passe. 



Q BLogger 
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Figure S. 15 ; Confirmation du nouveau mot de passe 

Un message vous confirme la bonne prise en compte de votre mot 
de passe. La mise a jour est immediate. Vous pourrez utiliser le 
nouveau mot de passe des la prochaine connexion. 



Que fatre en cas d'oubli de mot de passe ? 

Si vous avez oublie votre mot de passe ou votre nom d'utilisateur, 
rendez-vous sur le page d'accueil de Blogger et cliquez sur le lien Sign 
in to Blogger (Connexion a Blogger). Cliquez ensuite sur le point 
d' interrogation situe a cote du champ Mot de passe afin d'acceder a la 
procedure de recuperation. Pour recuperer votre mot de passe, il est 
indispensable d'avoir entre une adresse email valide lors de la procedure 
d' inscription. 



Gerer les commentaires 

La specificite du blog est la publication immediate des commentaires 
Iaisses par les visiteurs de votre site en reaction a un article publie. Ces 
commentaires sont classes du plus recent au plus ancien sur chacune des 
pages. 



50 LE GUIDE CDMPLET 



Aller plus loin dans la gestion de son blog 
Inserer un commentaire 

1 Ouvrez un navigateur Internet et rendez-vous sur votre blog, a 
Fadresse http://nomdublog.blogspot.com, "nomdublog" etant a 
remplacer par le nom donne a votre site. En bas du message cr6& 
precedemment et publie sur le blog, cliquez sur le lien 
comments. Actuellement, aucun commentaire n'a encore ete poste 
sur le blog. 

2 Une fenetre destinee au commentaire apparaft a l'ecran. Entrez un 
commentaire et cliquez sur le bouton Enregistrer. Blogger 
n'autorise pas par defaut les commentaires anonymes, il est done 
n£cessaire d'avoir un compte chez Blogger ou d'en creer un afin 
de pouvoir valider le commentaire. Cette option peut Stre 
modifiee au sein des parametres de commentaires, abordes dans la 
section suivante. 
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Figure 2. IB : Ajout d'un commentaire 

3 Le commentaire apparait immediatement en bas du message. La 
publication est done instantanee. 
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Filtrer les commentaires 



i 



Afin de connaitre a tout moment le suivi des commentaires sur 
votre site, rendez-vous sur le tableau de bord de votre blog. Si 
necessaire, identifiez-vous de nouveau en indiquant votre nom 
d'utilisateur et votre mot de passe. 

Activez l'onglet Parametres et cliquez sur le lien Commentaires. 
Cette section vous permet de gerer les commentaires recus sur le blog. 

Si vous souhaitez masquer les commentaires recus, cochez la case 
Masquer. Les commentaires deja enregistres ne seront pas supprimes 
du tableau de bord mais ne s'afficheront plus sur votre blog. 

Selectionnez dans la liste deroulante suivante les personnes 
autorisees a ajouter les commentaires. Par defaut, il s'agit 
obligatoirement de personnes possedant un compte chez Blogger. 
Afin d'ouvrir votre site a un maximum de personnes sans imposer 
la creation de compte chez Blogger, il est conseille de choisir 
l'option Toute personne. 
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Figure Z.I 7 : Edition des commentaires recus 

5 Les autres options peuvent etre conservees par defaut. Si vous 
souhaitez moderer les commentaires, c'est-a-dire les visualiser 
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avant publication, cochez la case Qui a la question Activer la 
moderation des commentaires. 

Afin d'etre tenu informe des reactions suscitees par vos messages, 
un mail peut vous etre envoye a chaque commentaire poste. 
Entrez votre adresse mail dans le champ Adresse de notification de 
commentaires. 

Afin d'enregistrer les nouvelles options de gestion de 
commentaires, cliquez sur le bouton Enregistrer les parametres. 



A 

aitotion Ne surchar 9 ez P as votre messagerie 

Si le trafic de votre blog devient trop important, n'oubliez pas de 
supprimer 1' adresse de notification dans les parametres de commentaire 
afin de ne pas etre envahi par plusieurs dizaines de mail quotidiens. 



Porsonnaliser I'interface graphique 

Par defaut, plusieurs modeles graphiques vous sont proposes dans 
Blogger. Afin de personnaliser ces modeles a votre gout, vous pouvez 
modifier la feuille de style associee au modele. 

1 Activez l'onglet Modele et cliquez sur le lien Modifier. A partir de 
la liste deroulante Modifier Blogger NavBar, vous pouvez 
determiner la couleur de la barre de navigation utilisee pour 
effectuer des recherches au sein de votre blog. 

2 La zone de texte situee juste en dessous inclut la feuille de style 
de votre modele, c'est-a-dire tous les parametres de mise en forme 
et de couleur propres a I'interface choisie. 

3 Modifier manuellement la feuille de style CSS est une tache 
reservee aux utilisateurs experimentes. Aussi, afin de vous aider 
dans cette tache, une petite astuce consiste k selectionner 
Fensemble de la feuille de style, de la balise <!doctype 
html . . .> a la balise </html> puis a l'integrer dans un editeur 
web qui vous permettra de changer 1'apparence du modele 
graphique sans rentrer dans le code source. 



^" Pour obtenir davantage d'informations sur I'utlisation de 
renvoi V editeur Web Dreamweaver, reportez-vous au chapitre 4, Aller 
plus loin avec Dreamweaver. . 
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4 Lorsque 1' ensemble de la feuille de style est en surbrillance, 
cliquez du bouton droit et selectionnez la commande Copier dans 
le menu contextuel. 
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Figure 2.18 : 

Copie de la feuille de 

style 



Ouvrez un editeur web tel que Dreamweaver et creez un nouveau 
document HTML. Passez en mode Code source en cliquant sur 
I'onglet Fractionner. Supprimez le code par defaut en le 
selectionnant puis en appuyant sur la touche [Suppr] . 

Remplacez-le par le code de la feuille de style en cliquant du 
bouton droit et en selectionnant la commande Coller. 
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Figure 2 A3 : 

Edition du modele 
dans Dreamweaver 



7 Votre modele de page s'affiche dans Dreamweaver. Modiflez 
styles et couleurs avec la fenetre Propriete et en vous aidant de la 
fenetre Styles accessible avec le menu Fenetres/Styles CSS. Ne 
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faites pas attention aux elements inseres entre les balises qui 
correspondent aux differents intitules de la feuille de style. lis 
seront automatiquement remp laces par le texte de vos articles au 
sein de B logger. 

8 Lorsque vous etes satisfait du resultat> lancez un apergu dans le 
navigateur avec la commande Fichier/Apercu et enregistrez le 
resultat obtenu au format HTML depuis le menu 
Fichier/Enregistrer sous. 

9 Selectionnez de nouveau l'ensemble du code source modifie. 
Effectuez un copier/coller dans le tableau de bord de B logger, au 
sein de la zone de texte de I'onglet Modele. Cliquez sur le bouton 
Aperou afin de verifier une derniere fois le resultat au sein du 
navigateur Internet. 

10 Pour confirmer votre choix et enregistrer definitivement les 
modifications, cliquez sur le bouton Enregistrer les modifications 
du modele. 



REMAHCUE 



Changer de modele 

Afin de changer de modele, activez I'onglet Modele et cliquez sur le 
lien Selectionner. Vous accederez a plus d'une vingtaine d'interfaces 
pretes a l'emploi pour votre site. Cliquez sur le bouton Utiliser ce 
modele pour remplacer votre interface actuelle. Attention neanmoins, si 
vous avez personnalise la feuille de style de votre precedent modele, 
toutes les modifications seront perdues. 



2.4. Creer un blog multimedia 



Blogger permet la creation rapide d'un blog avec images et textes. Mais 
si vous souhaitez publier du contenu multimedia ou un album photo deja 
pret a l'emploi, vous pouvez faire appel a un autre service gratuit 
disponible sur le site Over-Blog, qui n' impose pas de bannieres 
publicitaires sur ses sites a condition que des mises a jour regulieres y 
soient effectuees. 



Mettre en ligne son blog photo 

Contrairement a Blogger, Over-Blog se charge de creer 
automatiquement des vignettes de vos images. Un clic sur une vignette 
entraine l'ouverture de la photo corrcspondante en taille reelle dans une 
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nouvelle fenetre. L' interface, plus riche que dans Blogger, reste 
neanmoins facile d'acces aux bloggeurs debutants. 

De plus, grace a l'outil de recherche interne a Over-Blog, votre site est 
reference automatiquement et il est accessible lors d'une recherche sur 
la page d'accueil selon de multiples criteres : par texte entier, 
utilisateurs, mots-cles ou centres d'interets. 

Inscription sur Over-Blog 

1 Rendez-vous a l'adresse www.over-blog.com. Cliquez sur le bouton 
Creez votre blog afin d'ouvrir un compte. 




Figure 2. 20 : Creation d'un blog sur Over-Blog 

Entrez une adresse mail valide et un mot de passe que vous 
devrez con firmer pour eviter tout risque d'erreur. Choisissez un 
nom pour votre blog, une cat6gorie puis cliquez sur le bouton 
Creer mon blog. 

L' interface d' administration d'Over-Blog s'affiche a l'ecran. 
Cliquez sur l'icone Documents puis Images & Albums photos. La 
premiere etape consiste a importer les photos situees sur votre 
ordinateur. 
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Figure 2.21 : Creation d'un album photo depuis interface 
d administration d'Over-Blog 



Importer les photos 

1 Vous pouvez charger directement une nouvelle image qui se 
placera a la racine de votre site ou creer un nouveau repertoire 
dans lequel votre photo sera stockee, pour une meilleure 
organisation. 

2 Inserez un nouveau repertoire en cliquant sur le lien Creer un 
repertoire ici. Dans le champ Nom du repertoire, indiquez le titre de 
votre repertoire puis cliquez sur le bouton Creer. 

3 Afin de charger une photo au sein du repertoire nouvellement 
cree, cliquez sur le lien Ajouter des images ici. Over-Blog accepte 
les photos aux formats JPEG, GIF ou PNG d'un poids maximum 
de 8 Mo. 

4 Cliquez sur te bouton Parcourir afin de selectionner votre photo 
sur votre disque ou sur un support amovible (CD-ROM, cle USB, 
etc.). Si votre photo n'a pas ete prealablement optimisee pour le 
Web, cochez la case Optimiser les images. 
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Si vous avez prealablement optimise vos images avec un logiciel 
de retouche photo, decochez cette case afin de ne pas degrader la 
qualite de vos images. 

Cliquez sur le bouton Valider pour enregistrer les modifications. 
Reproduisez cette manipulation afin d'inserer de nouvelles photos 




Figure 2.22 : Insertion d'images dans I album photo 



Le poids, ennemi de votre blog 
Meme si TADSL s'installe progressivement dans de nombreux foyers, 
ne proposez pas sur votre page d'accueil des images dont le poids est 
superieur a 100 ko. Si vous n'etes pas familier avec F optimisation des 
images, n'oubliez pas de cocher 1* option d'optimisation automatique 
d'Over-Blog. 



RENVOI 



Pour davantage d' information sur la compression d'images 
pour le Web, reportez-vous au chapitre 8, Optimiser des images 
pour le Web. 



Ajouter descriptions et legendes 

1 Apres avoir importe" votre photo, celle-ci s'affiche 
automatiquement sous forme de vignette dans 1' interface d'Over- 
Blog. Trois icones sont disponibles sous la vignette : 

— Le marteau permet de modifier le titre, d'ajouter une 
description, un nom d'auteur et eventuellement un copyright. 
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— La loupe sert a visualiser la photo en taille reelle. 

— La croix permet de supprimer une photo. 

Afin de completer ces informations, cliquez sur l'icone Modifier 
les information de I'images representee par le marteau afin d'entrer 
les informations liees a votre photo. 




Figure 2.23 : 

Ajout d'informations sur la photo 



La fenetre d'informations correspondant a la vignette 
d'informations s'affiche a Fecran. Dans le champ Titre, indiquez 
un titre pour votre photo. Ce titre se placera sous F image au sein 
de 1' album photo. 

Dans la zone de texte Description, entrez une courte description de 
votre image (anecdote, informations de prise de vue, etc.). Entrez 
si vous le souhaitez le nom de l'auteur et un copyright dans les 
champs Auteur et Copyright. Validez sur le bouton OK pour 
enregistrer les modifications. 



Modifier les info 

Titre; 
Description: 

Auteur : 

Copyright : 


rmations de I'image 


ixj 
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JPhoto prise depuis la 
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Figure 2.24 : Edition des informations d'une photo 

Si vous passez votre souris sur la vignette precedemment 
selectionnee, vous pourrez visualiser le titre et le poids de 
I'image au sein de Finfobulle qui apparatt. 
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2005-031 8-vue-toit$.jpg 
Taille : 53 Ko 



Figure 2.25 : 

Apercu rapide des informations 
d'une photo 



6 Reproduisez cette manipulation pour toutes vos photos afin de 
leur ajouter une legende. Si vous n'entrez aucune information, le 
nom de 1' image sera utilise par defaut comme legende de 1' image. 



Mise en place de I'album photo 

1 Apres avoir importe toutes vos images et leur avoir attribue une 
legende, activez le lien Converter ce repertoire en album situe dans 
Tangle inferieur gauche de la fenetre d' importation d' images. 

2 Une nouvelle fenetre apparatt afin de parametrer la mise en page 
de I'album photo. Activez le lien Cliquez ici pour choisir une 
couverture afin de definir la photo qui apparaftra en premiere page 
de votre album photo. 

3 Remplissez les champs Titre et Description de I'album photo. Dans 
les champs Nombre de colonnes et Nombre de photos par page, 
conservez la valeur 5 inseree par deTaut. Validez en cliquant sur le 
bouton Enregistrer. 

4 Apres avoir entre toutes les informations necessaires, un message 
confirme que votre repertoire a bien ete converti en album photo. 



Editer les infos de I'album 
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Figure 2.26 : 

Parametrage de 
I'album photo 
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Ajout du module Album photos 

1 Derniere etape avant la publication de votre album photo, 1' ajout 
de la fonctionnalite Album Photo doit etre activee. Cliquez sur 
l'icone Configurer puis sur I'onglet Mise en page 
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Figure 2.27 ; Ajout du module Album Photos 

2 Dans la section Modules disponibles, glissez-deplacez le module 
Albums Photos vers la colonne de votre blog. 



RI.W.Iil)UI 



Les iimites de la version gratuite 

La version gratuite d'Over-Blog ne propose pas de noms de domaine. 
Afin de beneficier d' options de publications avancees et de votre propre 
nom de domaine, vous devrez opter pour la version payante, disponible 
a partir de 50 € par an. 



Pour visualiser le resultat, cliquez sur le bouton Voir mon blog 
situe en haut a droite de ['interface. Le nom de votre album de 
photos apparatt dans votre module et ouvre une nouvelle page 
contenant toutes vos vignettes. 

Dans la colonne de droite, cliquez sur la couverture afin de 
visualiser I'album photo. Les vignettes s'affichent a I'ecran. Un 
clic sur une vignette entraine l'affiche de la photo en taille reelle. 
Pour passer d'un cliche a 1' autre, utilisez les fleches de 

navigation. 
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Figure 2.38 : 

Apercu d'un album 
au sein du blog 



Personnaliser I'interface 

1 Over-Blog propose de multiples modeles d' interface destines a 
personnaliser l'apparenee de votre blog photo. Afin d'y acceder, 
revenez dans I'interface d' administration et activez l'icone 
Design. 

2 Plus d'une vingtaine d' interfaces sont proposees gratuitement. Un 
mode avance permet de personnaliser entierement votre interface 
avec une feuille de styles en cliquant sur 1'onglet Mode avance. 




Figure 2.29 : 

Modeles d 'inter face 
d'Over-Blog 

3 Pour afficher un nouvel apercu de votre blog avec Tun des 
modeles disponible dans 1'onglet Design, cliquez sur l'icone 
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Loupe. Si vous etes satisfait, cliquez sur le bouton Selectionner. 
Le nouveau modele s' applique immediatement a votre blog. 

En plus de I'interface, vous pouvez modifier la structure de votre 
blog, constitute par defaut d'une zone principale au sein de 
laquelle se trouve textes et photos, encadree par deux colonnes 
depuis la section de Mise en page. 

Vous pouvez definir la position de vos colonnes en cliquant sur 
F image dans la section Cboix de structure. Cliquez sur la mise en 
page choisie, celle-ci s' applique immediatement a votre blog. 



2.5. Blogger avec son mobile 



Mettre a jour son blog a n'importe quel moment du jour ou de la nuit, a 
Faide d'un simple telephone mobile connecte a Internet, est une realite 
grace aux outils de moblogging. 

Certaines plates-formes de blog offrent en option la possibility de mettre 
a jour son blog Internet via un mobile grace a l'envoi d'email ou de 
MMS (messages courts avec images) mais d'autres services se sont 
egalement specialises dans ce nouveau phenomene de mode, afin de 
rendre egalement accessible votre blog depuis n'importe quel telephone 
mobile disposant d'un navigateur WAP capable d'envoyer des MMS et 
des emails. 



D:(IH!iiCI, 



Qu'est-ce que le WAP ? 

Le WAP (Wireless Application Protocol, protocole de communication 
sans fil) permet aux utilisateurs de telephone mobile muni d'un 
navigateur WAP d' acceder a un contenu Internet adapte. 



Inscription a Mobitype 

La procedure d' inscription est rapide, immediate et gratuite : 

1 Ouvrez votre navigateur Internet et indiquez Fadresse 
WWW.mobitype.com. Meme si cette adresse est egalement accessible 
depuis un telephone mobile, il est plus rapide d'utiliser un 
ordinateur pour proceder a F inscription. 

2 Sur la page d'accueil, cliquez sur le lien Creer un compte. 
Choisissez un pseudonyme, un mot de le passe et une adresse 
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email valide puis recopiez les lettres affichees dans 1' image afin 
d'enregistrer votre inscription. Cochez la case En vous inscrivant, 
vous acceptez les conditions generates du service Mobitype, apres les 
avoir lues en cliquant sur le lien. Cliquez sur le bouton Je 
m'inscris. 



£jf) moaiTVPE 



.a souscription au Mobitype est gratuite, simple et rapide. II suffit de choisir votre ps6 
apres rinscription. 



wiot de passe 



seudo : 
korine3230 



i-maif : 



karine@hoJmail.com 



i/eui.llez saisir ce cod e dans le dhamp ci-dessous 



WZPW 



wzpw 



Je m'inscris! 



? En vous inscrivant, vous acceptez les conditions generates du service Mobitvoe, 



3 RetQur acweil 



Figure 2.30 : Inscription a Mobitype 

3 Votre compte Mobitype est valide. Vous pouvez creer un nouveau 
blog ou vous connecter a un blog existant. 



Creer son blog mobile sur Mobitype 

Mobitype est un service gratuit destine a creer un blog optimise pour les 
telephones mobiles. 

1 Apres vous etre inscrit sur Mobitype, cliquez sur le lien Creer un 
blog. Choisissez un identifiant pour votre blog. 

2 II est important de choisir un identifiant simple et facile a retenir 
car il est definitif et ne pourra pas etre modifie apres rinscription. 
II sera utilise au sein de l'adresse du blog. Dans cet exemple, 
Pidentifiant est Karine, l'adresse du site sera done du type 
http://karine.mobitype.com. 



B4 
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3 Apres la creation du compte, il s'agit maintenant de creer votre 
premier article. La creation d' article se deroule sur le site 
Mobitype ou via un telephone mobile. Cliquez sur le lien Mes 
blogs : ecrire et lire. Vous pouvez au choix: 

— ecrire un article (texte) ; 

— mettre en ligne une image, un son et/ou une video. 

4 Un formulaire apparait afin de mettre en ligne un texte compose 
d'un titre et de quelques lignes. Des que le message est envoye, le 
message est publie chez Mobitype. Cochez la case Autoriser les 
commentaires afin que les internautes puissent immediatement 
envoyer leurs commentaires. 



mDBITVPE 



Nouvel article 
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Dons plans a Be/celoM 



:ontenu : 



Render-yous dans l« quartier de Lo Sagrada Familia au ctfi "Latinos" afin it diguster I'une des meilleuras tangria de Barcefone. 



I Autorisar Iss commentairas 



Validor 



Comment inserer des btilise? HTML ? 



n Annular 



Figure 2.31 : Insertion d'un article sur le blog mobile 

L'envoi d' image, de podcast (son) ou dc video s'effectue depuis 
un ordinateur ou via un telephone mobile en envoyant un email 
ou un MMS. Cliquez sur le lien Ecrire dans ce blog puis 
selectionnez Mettre en ligne une image, un son et/ou une video. 

Une adresse mail personnelle vous est attribute, du type 
axxxxxyzzzzzz@post.mobitype.com. Cliquez sur ce lien afin 
d'ouvrir votre logiciel de messagerie puis inserez en piece jointe 
le fichier a publier. Inutile de retoucher les photos avant de les 
publier sur les blog, elles seront automatiquement 
redimensionnees par Mobitype afin de s'afficher correctement sur 
le navigateur WAP du mobile. 

Vous pouvez changer cette adresse mail en cliquant sur le lien 
Changer I'email secret mais elle restera du meme type et done 
difficile a retenir. Validez en cliquant sur le bouton Mettre a jour. 

Afin de vous assurer que la publication des medias s'est 
correctement deroulee, cochez la case Je veux recevoir une 
confirmation par mail de la mise a jour de mon blog. 
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Cliquez sur le lien Retour au blog afin de revenir a la page 
principale. Si vous avez choisi une thematique specifique pour 
votre blog, Mobitype vous propose d'ajouter dans votre profil des 
mots-cles destines a optimiser votre referencement dans le moteur 
de recherche Mobitype en cliquant sur le lien Profil de ce blog puis 
Meitre a jour le profil de ce blog. 

" ' ' ' "" '" "' — ' ■ 
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taroche : 
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Harci de saisir les mots -des separgs par des VIRGULES, par example : "chiens, cinema, lecture" 
Jarcelone., voyage, restaurants, cafes, bans plans, tou 
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Figure 2.32 : Ajouter des mots-cles pour un meilleur referencement 

10 Entrez les mots-cles relatifs a votre site dans la zone MOTS-CLES 
puis enregistrez les modifications en cliquant sur le bouton 
Sauvegarder. En rentrant ces mots-cles au sein du moteur, les 
intern autes pourront acceder plus facilement a votre blog. 



RWJRrjU? 



Personnaliser I'habfllage de votre blog mobile 

Le site Mobitype propose plusieurs interfaces par defaut pour votre 
blog, accessible en cliquant sur le lien Habillage de mes blogs. Treize 
modeles sont a votre disposition, n'hesitez pas a les tester sur votre 
telephone mobile afin de selectionner le modele le plus adapted 



Optimiser son blog pour une lecture 
sur telephone mobile 

Le site Mobitype permet egalement de rendre compatible un blog cree 
avec une autre plate-forme tel qu'Over-Blog ou Blogger par exemple. 
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Neanmoins, n'esperez pas publier sur un blog mobile un album photo ou 
des videos trop volumineuses en raison des debits encore limites pour la 
plupart des utilisateurs. 

1 Rendez-vous sur le site Mobitype a 1'adresse www.mobitype.com et 
entrez vos identifiants. 

2 Cliquez sur le lien Mes blogs : ecrire et lire puis sur le lien Integrer 
un autre blog existant Afin de vous assurer que votre blog peut etre 
optimise pour une lecture sur telephone mobile, cliquez sur le lien 

Consulter les marques de blog compatibles. 

3 Entrez l'URL de votre blog, e'est-a-dire son adresse web du type 
http://karine.over-blog.com. Si votre site n'est pas 
compatible, un message d'erreur s'affiche en rouge sur la page. 
Cliquez sur le bouton Suite afin de poursuivre P inscription. 

4 Mobitype affiche les operations qui seront accessibles sur votre 
blog depuis un telephone mobile (lecture, mise a jour d' articles, 
gestion de commentaires, etc.). 
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Figure 2.33 : Optimiser son blog pour une lecture sur telephone 
mobile 

5 Entrez l'identifiant et le mot de passe utilises pour acceder au 
blog. Vous pourrez desormais y acceder depuis votre telephone 
mobile. 



IMaviguer sur d'autres blogs depuis 
votre telephone mobile 

Mobitype ne permet pas uniquement de consulter les blogs crees ou 
optimises avec Mobitype, mais aussi ceux publies ailleurs sur le web, a 
condition qu'ils soient dotes d'un fil RSS. 



DEFINITION 



Fil RSS 

Un fil RSS (Really Simple Syndication, souscription vraiment simple en 
franc. ais) est un format de syndication de contenu web. Ce systeme de fil 
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RSS permet de consulter les mises a jour d'un site et les dernieres 
informations sans visiter le site. 



Depuis votre telephone mobile, rendez-vous sur la page d'accueil 
de Mobitype puis cliquez sur le lien Top. Cette rubrique vous 
permet de consulter les blogs recemment mis a jour, les plus 
lus au cours des dernieres 24 heures ou de la semaine ainsi que les 
mots-cles les plus populaires aupres des internautes. 

Si vous souhaitez effectuer une recherche sur un theme precis, un 
clic sur la rubrique Trouver un blog lance une recherche a partir 
d'un mot-cle ou d'une adresse web si vous la connaissez. 

Vous pouvez egalement etre alerte en cas de mise a jour sur un 
blog et acceder rapidement a vos blogs preferes, en les 
enregistrant en tant que favoris en cliquant sur le lien Ajouter aux 
favoris accessible lors de la navigation depuis votre mobile. 



2.6. Referencer son blog 



Afin de vous faire connaitre parmi les milliers de blogs publies 
regulierement, des annuaires dedies specialement au blog ont vu le jour. 

L'inscription est gratuite. Afin d'etre retenu, votre site doit proposer un 
contenu pertinent et regulierement mis a jour, idealement 
quotidiennement. 



Inscription dans un annuaire francophone 

1 Ouvrez votre navigateur Internet et rendez-vous a l'adresse 
www.blogolist.com, annuaire consacre exclusivement aux blogs 
francophones. 

2 Cliquez sur le lien Ajouter un blog afin de proposer votre blog. Un 
administrateur verifiera l'adresse de votre blog et son contenu afin 
de s'assurer que le blog merite d'etre reference (voir Figure 2.34). 

3 La prise en compte de l'inscription prend generalement quelques 
jours, voire quelques semaines. Un mail vous sera envoye afin de 
vous avertir du referencement au sein de 1'annuaire. 
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jblogolist 
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n^iira 2.34 : Blogolist, annuaire de blog francophone 



Inscription dans un annuaire mondial 

1 Bien qu'international, Blogwise (www.blogwise.com) a 1'avantage de 
proposer un referencement par pays, ce qui vous garantit une 
certaine visibility meme si votre blog est ecrit exclusivement en 
francais. De la meme facon, n'hesitez pas a consulter les annuaires 
beiges, suisses, quebecois, meme si une version anglaise de votre 
blog constituera indeniablement un atout supplemental. 

2 Pour soumettre votre blog sur Blogwise, cliquez sur le lien Click 
here to submit your blog (soumettre votre blog). Indiquez 
simplement l'adresse de votre site dans la zone URL et validez par 
le bouton Go. 




Figure 2.35 i Blogwise. annuaire mondial de blog 
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3 Afin de verifier la pertinence de ee referencement, n'hesitez pas a 
consulter vos statistiques de visite. 

Sur Blogger, aucun outil de statistiques n'est prevu par defaut. Vous pouvez 
faire appel a des sites externes tels que Xiti pour en savoir plus sur vos 
visiteurs ou plus simplement, ajouter un compteur sur la page d'accueil. 

fit' Pour obtenir davantage d 'informations sur Vinsertion d'un 
RENVO i outil de statistiques au sein de votre site web, reportez-vous au 
chapitre 5, Les ressources gratuites du Web, 

2.7. Les points essentiels a retenir 

Creer son blog est devenu aussi simple que d'ecrire son courrier avec un 
traitement de texte. Simplicity d'utilisation, gratuite, interfaces 
d' administration accessibles a tous. Cependant, avant de vous lancer 
dans l'aventure du blog, n'oubliez pas de verifier les points suivants : 

Afin de reussir votre blog, des mises a jour hebdomadaires, 
idealement quotidiennes sont indispensables. Rien de plus 
rebarbatif pour l'internaute que d'arriver sur une page d'accueil 
dont la date de la derniere mise a jour remonte a quelques 
semaines, pire quelques mois. 

Si vous etes familier de la langue de Shakespeare, n'hesitez pas a 
proposer une traduction de votre blog, meme partielle, pour une 
visibility dans les annuaires internationaux. 

Les plates-formes de blog sont malheureusement souvent victimes 
de leurs succes. A certaines heures de ta journee, des pics 
d' audience peuvent entraver la lecture de votre blog avec des 
connexions ralenties. Avant de choisir une plate-forme de blog, 
n'hesitez pas a consulter quelques-uns des sites crees avec cet 
hebergeur afin de tester ses performances techniques, 

II est fortement deconseille de publier sur un blog des 
informations personnelles (nom, adresse, coordonnees 
telephoniques, etc.). 

Utilisez si possible une adresse mail de contact dediee au blog 
afin de vous premunir des eventuels messages publicitaires et 
autres courriers indesirables. 

Consultez regulierement les commentaires postes sur votre site et 
repondez-y afin d'entretenir l'echange avec vos visiteurs. 
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Vous debutez en HTML mais vous aimeriez pourtant avoir, vous aussi, 
votre page personnelle sur le Web ? Rien de plus simple avec Cariboost 
Free Edition, un editeur web entierement gratuit en francais qui possede 
des modeles de sites prets a l'emploi pour se familiariser avec la 
creation de site web. 

La version gratuite proposee sur le site de 1' editeur permet de creer 
jusqu'a trois sites web de huit pages avec albums photo illimites. Elle 
offre meme 1' integration de menus dynamiques au sein de vos pages. Un 
outil de gestion integre se charge des mises a jour avec votre serveur 
web. 

Arm de vous familiariser avec les multiples fonctionnalites de ce 
logiciel, vous decouvrirez dans ce chapitre comment creer un CV en 
ligne et partager vos photos de vacances au sein d'un carnet de voyage. 



3.1. Telecharger et installer Cariboost 

L'objectif de la version gratuite du logiciel Cariboost n'est pas de creer 
un site de e-commerce de derniere generation. Cette version comprend 
des fonctions basiques et presente l'avantage d'une prise en main tres 
rapide. 

Insertion d'images, de liens, de listes a puces, de textes, de formulaires, 
tout y est, et meme des fonctions plus avancees pour inserer un menu 
dynamique ou creer un album photo evolue. 

Lorsque vous etes satisfait du resultat, il ne reste plus qu'a publier votre 
page sur le Web grace a un logiciel FTP integre tres simple d'utilisation 
qui vous permet d'envoyer vos pages en ligne afln d'admirer le resultat 
en quelques clics. 

Procedez ainsi : 

1 Afln de telecharger la version gratuite de Cariboost, rendez-vous a 
I'adresse www.cariboost.fr. Sur la page d'accueil, cliquez sur le lien 
telecharger puis choisissez la version a installer : Mac ou PC. 



72 LE GUIDE COMPLET 



Telecharger et installer Cariboost 



Chapitre 3 




TtltchJrge-i -■:<>■.:■:; Aid* , Actuainw Pr*sm 



Vous voulez crter un site Web s implement etrapidem«nt? 
Venez decouvrir CARIBOOST 2.0 til 

i • [■•• ■::■ . «MI milf- pfiWIOl 

• A|o»ez du cohImni iniitrnnriii.i 

# Remtezvotie site muMlMgii* sons effoii 
w Piiblez voue «■• en Ictfc MM iMi-aiuetr.nje 
■„ ■ CiHImmisI «ii qnflqiN*s i.ikhs 
w Li |ii«»a tn (iiitleirunMMftiiwiiiV 

Ne v«uf taiisez phis dec-ot* vjk pai U i«m ihv w *t prer«2 1« e«nu Ate ti* voti * *»|kko Wfrh™ 



News 

M P.wtw S talboott 3.0 

•* AcliwHlesCniilioosimiiitoiiihUiqiM 

1 1 Tut<»ii.*ix 

| L« site thi imis 




Telecharger! 
Cariboost 2.0 

::: Compatible :: 





Exemples et opinions 



, Les srtes ile no5 ntili5.*eia5 
w Avtaif«su(MuEauts 




OwiiTfil 2005 21)01 ham-nAm?. 



. ... .i; ti . .i ,-- LnniHv.iti.il, .». | . < . - 1 ■ ------ 



Figure 3. 1 : Cariboost est telechargeable gratuitement sur le site 
web 



REMARQUE 



Version gratuite ou payante ? 



La version gratuite du logiciel Cariboost permet de publier son site 
web et un album photo en contrepartie de publicite. Aujourd'hui, la 
version 2.0 est proposee en version Premium au prix de 49 € pour un 
usage personnel et de 89 € pour un usage professionnel. 



La derniere version ne pese que 5,6 Mo. Son telechargement avec 
une connexion haut debit prend moins d'une minute. Double- 
cliquez sur l'executable afln de lancer l' installation et choisissez 
Frangais dans la liste deroulante Langue. Validez par un clic sur le 
bouton OK. 

L' assistant d'installation s'affiche a I'ecran. Cliquez sur le bouton 
Suivant puis choisissez l'emplacement du programme au sein du 
menu Demarrer. 
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4 Par defaut, Ie programme se situe dans C:^SProgram 
Files\lntuitsphere\ Cariboost Free Edition. Lorsque l'instatlation est 
terminee, cochez la case Executer Cariboost Free Edition v1 puis 
cliquez sur le bouton Terminer. 




Figure 3.2 : 

L'assistant 
d'installation de 
Cariboost 



5 Lancez 1' application en double-cliquant sur Ie raccourci 
automatiquement installe sur votre Bureau. Lors de la premiere 
ouverture de Cariboost, le logiciel vous invite a creer un nouvel 
utilisateur. 

6 Cliquez sur le bouton Creer un nouvel espace web. Indiquez 

votre nom puis validez par un clic sur le bouton OK. Lors de 
rouverture du logiciel, tous les elements crees dans cet espace 
web seront automatiquement affiches dans la page d'accueil. 




Figure 3.3 : 

Enregistrement d'un 
utilisateur 



3.2. Publier son CV sur Internet 



Cariboost offre plus d'une dizaine de modeles prets a Temploi reserves 
aux usages les plus courants : site professionnel, album photo, CV en 
ligne, etc. 

Cette section est consacree a la creation d'un CV en ligne. Ce site ne 
comprend qu'une page. Vous pourrez manipuler Finterface afin de 
modifier et mettre en forme du texte. 



1 



Dans la boite de dialogue Nouveau site web, cliquez sur Tonglet 
Sites web d'exemples. Plusieurs modeles de site sont a votre 
disposition pour demarrer avec Cariboost, 

Cliquez dans le dossier Curriculum Vitae et selectionnez CV 3. 
Validez par un clic sur le bouton OK. Comme son nom 1'indique, 
ce modele va vous permettre de publier un modele de CV simple. 



^ Nouveau site web 



*us pouvea ch«* \n sit Web cwnptet ou ura page pwM r« eswvles afm cte aeer un rwveai site . 

Attention : tout** le* mages ptesertes dans ce* examples tort ta prcpnete de la sooece [NTUlSPtCRE, 4 e« stiKtement meet* de las utiwer < 

dehori d'un site neb Coribootf 



5*es we* tfexemples 






- _)« 
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CV2 
CV3 
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OK | flmufet J 



Figure 3.4 : Choix d'un modele 



Modifier et ajouter du texte 

La mise en forme de texte est un critere primordial dans la reussite de 
votre page web. Optez pour des presentations aerees et exhaustives afin 
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de faciliter la lecture sur Internet. Evitez les textes trop longs (une a 
deux pages ecran maximum) afin de rendre votre site agreable a 
parcourir. 

1 Tous les elements presents au sein du modele sont 
personnalisables. Par defaut, la page est divisee en plusieurs 
modules materialises par des pointilles. En cliquant sur le module 
a modifier, un encadrement bleu s'affiche a 1' ecran et quatre 
boutons de modification apparaissent a droite de l'encadre. 




Figure 3.5 : Edition du modele 

2 Pour modifier les elements encadres, cliquez sur le premier 
bouton Editer cet element afin de selectionner le texte. Lorsque 
celui-ci est en surbrillance, supprimez-le si necessaire a l'aide de 
la touche [Suppr] ou remplacez-le par le texte de votre choix. 



ASTUCE 



Suppression rapide 

Pour supprimer rapidement un module, cliquez sur l'icone Effacer cet 
element materialisee par une croix rouge et situee a droite du cadre 
selectionne. 
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Pour modifier des proprietes de texte telles que police, style de 
caracteres, taille ou couleur, utilisez la fenetre Proprietes du texte. 

Pour editer les proprietes d'un element, selectionnez le texte a 
editer avec la souris puis cliquez sur la police choisie dans la liste 
deroulante Police. 




Universite Plene et Marie Cuiie. Palis VI. 
Preparation crime these de Doctor at en Biokxjie Ceikilake et Molecuiaite 

Universite Blaise Pascal - Clermont-Ferrand. 
DEAde Physiologic et Genetique BIO MoleculaJres en exemple de CV 

Universite Blaise Pascal ■ Clermont-Ferrand. 
Diplome d'lngenieur C/U ST;, Depaitement Genie Biologique. Option Genie des Proteines, mttitut 
des Sciences de ringenleur. | 



Figure 3.6 : La fenetre Proprietes de texte 



REMARQUE 



Bien choisir sa police 

Lors du choix de votre police de texte, il est conseille de privilegier 
les polices les plus courantes telles que Arial ou Times New Roman afin 
d'eviter tout probleme de lecture aux visiteurs de votre site, quelle que 
soit leur configuration. 

Ces polices sont repertoriees en haut de la liste deroulante Police de 
Cariboost et vous garantissent une bonne lecture avec la majorite des 
configurations a Internet. Les polices plus exotiques ajouteront certes une 
touche d'originalite a votre site mais si l'intemaute ne les possede pas, 
elles seront substitutes par une police plus traditionnelle sans garantie 
d'un affichage correct au sein du navigateur. 



La fenetre Proprietes du texte vous permet egalement de modifier 
le style de texte - gras, italique ou souligne -, son alignement, sa 
taille et sa couleur. Afin d'appliquer un nouveau style a une 
portion de texte, selectionnez-le prealablement avec la souris puis 
choisissez 1' option appropriee. 

Si vous souhaitez ajouter un module de texte au modele par 
defaut, cliquez sur l'icone Texte de la barre d'outils principale. 

Deplacez le nouveau module de texte a l'emplacement choisi en 
maintenant le bouton de la souris enfonce et double-cliquez a 
l'interieur afin d'inserer votre texte. Appliquez une mise en forme 
en cliquant sur l'icone Editer cet element. 
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Ajouter des liens hypertextes 

Afin de naviguer facilement cTiine page a I' autre, il est recommande 
d' inserer de nombreux liens hypertextes au sein de vos pages. Cariboost 
se charge de leur creation tres rapidement depuis la fenetre Proprietes 
du texte. 

1 Afin d' ajouter un lien sur un element de texte, cliquez sur 1'icone 
Lien situee a cote de la liste deroulante Taille, dans la fenetre 
Proprietes du texte. La fenetre Choisir un lien s'affiche a l'ecran. 

2 Dans la premiere liste deroulante, selectionnez le type de lien a 
inserer. Cariboost vous permet d'inserer facilement un lien vers 
une page de votre site web, une adresse Internet ou une adresse 
email. Choisissez V option Lien vers une adresse Internet. 



Modify hyperlink 



Type du ten Web 



Lien vers une page de ce Site Web 



Ouverture dans la fenetre courante 



"3 



Pages 

£} Accueil 



AccueU 



OK 



Anrwter 



Figure 3. 7 : Ajout d'un lien hypertexte 

Dans la liste deroulante suivante, indiquez dans quelle fenetre le 
lien a inserer doit s'ouvrir. Vous pouvez opter pour une ouverture 
dans la meme fenetre ou dans une fenetre externe. Choisissez 
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cette seconde option puis indiquez V adresse Internet de la page a 
ouvrir, sans oublier la mention http:/I. Dans le cas d'un CV, vous 
pouvez inserer un lien vers le site de votre entreprise ou de votre 
ecole, par exemple. Validez par un clic sur le bouton OK. 



Modify hyperlink 



Type du lien Web 

Lien /ers une adresse Internet 



Tapez une adresse Internet ci dessous (ex:http://www.cariboost.fr) 



http://rtww.cariboost.fr 






OK 



Annuler 



Figure 3.8 : Insertion d'un lien vers une page web 

Votre lien est automatiquement cr6e\ Par defaut, le mot ou groupe 
de mots correspondant a un lien hypertexte est de couleur bleu et 
souligne. Afin de modifier ces parametres par defaut, selectionnez 
le lien avec la souris puis modifiez son aspect a l'aide de la 
fenetre Proprietes du texte. 



flEFINITIDN 



Le lien hypertexte 

Un lien hypertexte est un mot ou une phrase qui permet, lorsque vous 
cliquez dessus, de naviguer vers une autre page web, une adresse mail, 
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oERNmoN un fi cmer ^ telecharger, etc. Toute adresse Internet commence 

systematiquement par http://, suivi de l'adresse Internet ou du nom 
de domaine precede de la mention www (pour World Wide Web). Par 
exemple, l'adresse du site Micro Application est http://www.microapp.com. 



Ajouter une bordure 

Afin de mettre en exergue un element important de votre CV, la bordure 
s'avere un element de mise en page a la fois discret efficace. Pour 
ajouter une bordure au sein de Cariboost, vous devez faire appel a la 
fenetre Proprietes. 

1 Selectionnez le module a modifier puis cliquez sur l'icone 
Proprietes, situee en deuxieme position a droite de l'encadre. 

2 Au sein de l'onglet General, il est possible de modifier 
l'espacement du texte par rapport a la bordure de votre module. 
Par defaut, la marge appliquee est de 5 pixels mais vous pouvez 
rapprocher ou eloigner le texte en selectionnant une valeur 
respectivement inferieure ou superieure. 



ASTUCE 



Effets speciaux et compatibilite 

La fenetre Proprietes propose au sein de l'onglet General un effet 
destine a faire defiler du texte. En cochant cette case, le texte selectionne 
defilera horizontalement et de gauche a droite. Cet effet sera visible 
uniquement au sein des navigateurs de derniere generation tels 
qu' Internet Explorer 5 et plus. Dans les navigateurs plus anciens, votre 
texte restera statique. 



Afin d' ajouter une bordure au module selectionne, cliquez sur 
l'onglet Proprietes d'arriere-plan. Dans la liste deroulante 
Epaisseur de bordure, choisissez une valeur en pixels de 7 a 45. 
Plus la valeur est importante, plus la bordure sera epaisse. 

Pour choisir une couleur de bordure, cliquez sur le rectangle de 
couleur situe a droite du champ Bordure. Choisissez la teinte de 
votre choix a l'aide de la pipette. 

Le champ Coin permet de definir un angle d'arrondi a votre 
bordure et le champ Taille du flou donne un effet de flou plus ou 
moins important a votre cadre selon 1'option selectionnee. 
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Figure 3.9 : Proprietes de bordure 

6 Validez par un clic sur le bouton OK. La bordure s'affiche a 
l'ecran. 



1 










Depuls 199« Univei site Piei i e et Marie Cniie. Puis VI. 

Preparation d'une these de Doctoi at en Biologie Celtiilaiie et Molectilaire 

1*97-1998 Univei site Blaise Pascal - Clei mont-Fertand. 

DEA de Physiologie et Genetique BIO Moleculaiies en exemple de CV 

1995-96 Univei site Blaise Pascal - Clermont-Fenand. 

Diplome d'lngenieui C U/S T'. Depaitement Genie Biologique. Option Genie des Pioteines. InstHut 
des Sciences de t'lngenieut. 







Figure 3. 10 : Ajout d'une bordure 
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REMARQUE 



Les limites du rnodele 

II est impossible d'ajouter independamment du module selectionne 
une bordure a une portion de texte situee a l'interieur. Pour contourner 
cette limite, vous devez placer 1' element a encadrer par une bordure dans 
un nouveau module, en cliquant sur l'icone Texte situee dans la barre 
d'outils principale. 



Modifier les proprietes d'arriere-plan 

Par defaut, le rnodele de CV de Cariboost est compose d'un fond blanc 
(les pointilles sont visibles uniquement dans 1' interface d' edition du 
logiciel). Si vous souhaitez ajouter une image d'arriere-plan et un fond 
colore, vous devez faire appel aux fenetres Proprietes et Proprietes de 
la page. 

1 Afin de modifier 1' arriere-plan de votre page, selectionnez la 
commande Pages/Maquettes/Proprietes de la page au sein de la 
barre d'outils principale. 

2 Dans l'onglet Arriere-plan, choisissez une couleur et/ou une 
image d'arriere-plan. Par defaut, 1' arriere-plan de la maquette est 
utilise. 

3 Si vous preferez opter pour une couleur d'arriere-plan, decochez 
la case Utiliser une maquette comme arriere-plan. Privilegiez pour 
un CV une couleur claire afin de ne pas entraver la visibilite du 
texte. Lorsque votre choix est fait, cliquez sur le bouton OK (voir 
Figure 3.11). 



REMARQUE 



Fond colore et arriere-plan 

Si vous choisissez d'utiliser une image d'arriere-plan, celle-ci 
recouvrira automatiquement la totalite de votre page. Neanmoins, si le 
visiteur possede une resolution superieure a la taille de votre page (par 
exemple si la resolution est de 1 024 * 768 pixels alors que la page ne 
mesure que 700 pixels de large), la couleur choisie s'appliquera 
automatiquement a l'espace vacant. 



4 Si vous souhaitez utiliser une image d'arriere-plan personnalisee, 
cliquez sur l'icone de selection d'image. 
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Figure 3.11 : 

Selection d'une 
image d'arriere-plan 



Activez le bouton Ajouter des images depuis votre ordinateur 

afin de selectionner une image en tant qu' arriere-plan de votre 
CV. Celle-ci sera enregistree au sein de votre bibliotheque de 
ressources afin de rester facilement accessible lors de la 
construction de votre projet. 



m j x 

[IMOM 
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Figure 3. 12 ; 

Modification des 
proprietes de la page 
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REMARQUE 



Pensez a I'impression 

Lors de la realisation d'une page Internet, pensez toujours a la cible 
visee. Un CV est susceptible d'etre imprime par un recruteur potentiel. 
Aussi, preferez la lisibilite du texte a l'originalite. 

Evitez ainsi d'utiliser un fond noir avec un texte blanc. En cas 
d' impression de votre page, si l'internaute n'a pas desactive la prise en 
compte de la couleur d'arriere-plan dans ses options Internet, I'impression 
de votre CV avec un fond noir risque de lui revenir tres cher. Dans le cas 
contraire, si cette fonction est desactivee, un texte blanc imprime sur une 
feuille blanche sera alors illisible. 



6 Si vous souhaitez uniquement appliquer une image ou une 
couleur d'arriere-plan a un module specifique de votre page, 
selectionnez-le puis cliquez sur l'icone Proprietes. 

7 Cliquez sur l'onglet Proprietes d'arriere-plan. Choisissez une 
image ou une couleur d'arriere-plan qui s'appliquera uniquement 
a la zone selectionnee. 

8 La reglette Transparence permet de definir un niveau de 
transparence pour votre arriere-plan afin de mieux mettre le texte 
en valeur. Deplacez la reglette puis validez avec le bouton OK 
afin de visualiser un apercu du resultat obtenu. 



Jean D iiporit 
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Figure 3. 13 : Proprietes d'arriere-plan d'un paragraphe 
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Testez votre page web dans un navigateur Internet en cliquant sur 
le bouton Tester situe dans la barre d'outils principale. Si le 
resultat vous convient, sauvegardez votre page avec la commande 
Fichiers/Creer une sauvegarde de votre site. Choisissez un 
emplacement sur votre disque dur et validez par un clic sur le 
bouton OK. II ne reste plus qu'a transferer votre CV en ligne afin 
de le partager avec les internautes. 



RENVOI 



Pour passer directement a Vetape de publication, rendez-vous 
dans la section Sauvegarder et publier votre projet au sein de 
ce chapitre. 



3.3. Creer un carnet de voyage en ligne 

Si vous avez la chance de posseder un appareil photo numerique, vous 
souhaiterez certainement partager vos plus belles oeuvres avec vos 
proches, sans necessairement passer par l'etape d' impression. 

Grace au carnet de voyage en ligne, il devient inutile d'envoyer par 
mails des photos qui risquent de surcharger les boites aux lettres de vos 
correspondants ou de graver un CD-ROM pour chaque membre de la 
famille. 

Tous pourront profiter de votre recit et de vos photographies en un clic 
de souris. Cariboost possede un modele de site, compose par defaut de 
deux pages que vous allez pouvoir enrichir d'un album photo. 

1 Afin de creer un carnet de voyage, nous allons faire appel a un 
modele de site. Selectionnez la commande Fichiers/Nouveau site. 
Dans la fenetre Nouveau site web, cliquez sur l'onglet Sites web 
d'exemples. 

2 Cliquez sur le dossier Voyages puis sur le site Voyages 1. Un 
apercu du modele s'affiche a l'ecran. Validez par un clic sur le 
bouton OK. 
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Vous pouvez ehoisir un site Web complet ou une page parmi ces exemptes a/in de creer un nouveau site. 

Attention : toutes tes images preserves dans ces exemptos sont la proprieW de la societd INTUISPHERE, 4 est statement interd* de les utifcer en 

dehors tfOn site web Canboost 

Sites web rfexemples I 
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Figure 3. 14 : Selection du modele de site Carnet de voyage 



Organiser I'arborescence de son site 

Lorsqu'un site web comprend plusieurs pages, il est tres important de 
les organiser efficacement afin de visualiser rapidement la structure de 
votre site. Cariboost integre pour chaque site un tableau de bord virtuel 
destine a vous aider dans la construction de I'arborescence de votre site. 

1 Le modele de site Voyages 1 comprend deux pages, une page 
d'accueil et une page interieure ainsi que trois maquettes dont 
nous expliciterons les fonctions dans la section suivante. Ces 
elements sont visibles dans le tableau de bord virtuel, situes dans 
la colonne a gauche de la zone principale. 

2 Pour une meilleure organisation, il est conseille de donner des noms 
courts et explicites a chacune de vos pages. Selectionnez la page 
page 2 dans le dossier Pages du site puis cliquez du bouton droit 
et choisissez la commande Renommer dans le menu contextuel. 
Appuyez sur la touche [Suppr] afin d'effacer le nom actuel puis 
ecrivez Voyage. Cette page contiendra le recit du voyage. 

3 II est necessaire d'ajouter une nouvelle page dans laquelle les photos 
du voyage seront placees. Cliquez sur l'icone Ajouter une nouvelle 
page. La fenetre Insertion d'une page dans votre site apparait a 
l'ecran. Selectionnez Page vide puis cliquez sur le bouton OK. 
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4 Par defaut, votre nouvelle page est appelee Nouvelle page 
(2). Renommez-la en Album Photo. Pour le moment, cette 
page est constitute uniquement d'un fond blanc. 




Figure 3. 15 ; Affichage du site Carnet de voyage 



Ajouter une maquette 

Afin que votre nouvelle page s'insere parfaitement dans votre site web, 
il est necessaire de lui appliquer la meme maquette qu'aux autres pages 
du site web. 

1 Au sein du tableau de bord virtuel, selectionnez la page Album 
Photo. Activez la commande Pages/Maquettes/Proprietes de la 
page. 



Maquette 

ON 

Lorsque des elements recurrents doivent etre inseres au sein de 
plusieurs pages d'un site web tels que logo, titre, copyright, il est 
conseille d'en faire une maquette au sein de Cariboost. lis seront inseres 
en tant que fond de page. 
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bZZ.. Principal avantage, en cas de mise a jour des informations contenues 

DEFINITION , r & » J 

dans votre maquette, Ies modifications se repercutent 
automatiquement dans toutes les pages de votre site web au sein 
desquelles cette maquette a ete inseree. 



2 Selectionnez l'onglet Arriere-plan puis cochez la case Utiliser une 
maquette comme arriere-plan. Dans le dossier Maquettes, 
selectionnez la maquette affichee par defaut. Validez par un clic 
sur le bouton OK. 



Proprietes de la page 




Figure 3. IB : Ajout d'une maquette a une page vierge 

Afin d'enregistrer l' utilisation de la nouvelle maquette au sein de la 
page Album Photo, cliquez sur une autre page du site. Une boite de 
dialogue apparatt pour vous demander si vous souhaitez enregistrer 
les modifications apportees a la page. Cliquez sur le bouton Oui. La 
mise a jour apparatt dans le tableau de bord virtuel. 






Figure 3.17 : Boite de dialogue d'enregistrement 
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Modifier une maquette 

Le modele de site utilise pour la creation du carnet de voyage est 
constitue de plusieurs elements tels que fond de page, en-tete de page et 
pied de page. En modifiant la maquette, la mise a jour affectera 
automatiquement toutes les pages utilisant cette maquette. 

1 Dans la section Maquettes situee dans la colonne de gauche, 
selectionnez Nouvelle maquette. Renommez-la, par exemple, 
"maquette_accueil" en cliquant du bouton droit et en choisissant 
la commande Renommer. 

2 Un cadre bleu apparait a l'ecran. Cliquez sur 1'icone Editer cet 
element afin d'afficher la fenetre Proprietes du texte. Remplacez 
le texte existant par le titre de votre site. 

3 Si le titre de votre site est trop long pour s'inserer dans le cadre 
par defaut, il suffit d'agrandir l'espace octroye au titre en placant 
votre curseur sur le cadre bleu puis en deplacant le curseur dans la 
direction de votre choix. 




Figure 3. 18 : Modification du titre 

II est egalement necessaire de modifier les boutons de la 
maquette. Cliquez sur le bouton afin que celui-ci soit encadre de 
bleu puis double-cliquez. La fenetre de proprietes de boutons 
offre de nombreuses options afin d'ajouter effets speciaux, effets 
de rollovers et liens (voir Figure 3. 19). 

Selectionnez la page Accueil depuis le tableau de bord virtuel. La 
mise a jour a automatiquement ete repercutee sur cette page mais 
aussi sur la page Album Photo creee precedemment et faisant 
appel a la meme maquette. 
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Proprietes dn bouton 



General | Lien ji Proprietes geometriques 



Rectangle 



Effet 3D sur le bouton 
□ Ombre sous le bouton 
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n Souligner le texte 
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Figure 3. 13 : Modification du titre 



Creer une nouvelle maquette 

La creation d'une nouvelle maquette est analogue a la creation d'une 
nouvelle page. Activez la commande Fichiers/Nouvelle maquette puis 
ajoutez les elements (textes, images...) de votre choix. Appliquez ensuite 
votre maquette a une page de votre site en cochant la case Utiliser une 
maquette comme arriere plan depuis la fenetre Proprietes de la page. 
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Inserer des images 



Afin de personnaliser la page d'accueil, il est necessaire de modifier le 
texte et d'ajouter quelques images. La page d'accueil, egalement 
appelee page d' index, constitue un element determinant dans le succes 
de votre site web qui donnera envie - ou non - au visiteur de poursuivre 
sa visite. II est done important de soigner son aspect graphique et de la 
mettre a jour regulierement. 

1 Affichez la page Accueil et cliquez sur le texte d' introduction, 
situe juste en dessous de l'image. Remplacez ce texte par un court 
descriptif de votre site et de son objectif. N'hesitez pas a aerer 
votre paragraphe et a y ajouter lien ou styles de mise en forme 
pour faire ressortir les elements importants. 

2 Faites de meme avec les deux paragraphes suivants. Vous pouvez 
egalement ajouter un nouveau paragraphe si vous le souhaitez en 
cliquant sur le bouton Texte de la barre d'outils ou supprimer un 
paragraphe en cliquant sur l'icone Supprimer, apres 1' avoir 
selectionnee. 



RENVOI 



Pour davantage a" informations sur la modification, Vajout et la 
suppression de texte au sein de Cariboost, reportez-vous a la 
section Publier son CV sur Internet/Modifier et ajouter du texte 
situee dans ce chapitre. 

Maintenant que votre texte est modifie, il s'agit d'editer les 
images situees sur la page d'accueil. Cliquez sur le bouton 
representant une loupe afin d'activer l'icone Choisir une image 

La fenetre Proprietes de l'image s'affiche a l'ecran. Une nouvelle 
image va etre choisie pour remplacer celle-ci. Activez l'onglet 
Choix d'image puis cliquez sur la vignette (voir Figure 3.20). 

La fenetre Choisir une image apparait a l'ecran. 

L' application propose par defaut six images deja integrees dans la 
maquette par defaut mais nous allons ajouter une image 
personnelle en cliquant sur le bouton Ajouter des images depuis 
votre ordinateur. Validez par un clic sur le bouton OK. Si votre 
image n'est pas a la bonne dimension, vous pourrez toujours la 
redimensionner depuis 1' interface du logiciel mais cette technique 
risque d'alourdir le poids final de votre photo (voir Figure 3.21). 
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Proprietes de f image 



Choix d'image Creation /modification du lien Proprietes geometriques 



Image principale Image qui apparaitra lors du survol de 1'image principale 
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Figure 3.20 : Fenetre Proprietes de /'image 




finite a Fort de France 



ri ipsum do|or sit amet, consectetuer adipiscing 
ed diem nonurnrny nibh euisrnod tincidunt ut 

lr~P' dcilore magna aliguam erat volutpat. Uf wis'is 

a 1 ad minim veniam, quis nostrud exerci tution ullatn. 

Lorem ipsum dolor sit amet, consectetuer adipiscing . 

elit, sed diem nonurnrny nibh euisrnod tincidunt ut lace 



Figure 3.21 : Remplacement d'une image 
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Redimensionner une image 

Si votre image n'est pas a la bonne dimension, vous pourrez toujours 
la redimensionner depuis l* interface du logiciel mais cette technique 
risque d'alourdir le poids final de votre photo. 



7 Vous pouvez ajouter un lien sur cette image en cliquant sur le 
bouton Lien situe a droite de 1'image. 

8 Arm de visualiser un apercu de votre site, cliquez sur le bouton 
Tester. Lors du passage de la souris sur le bouton, une nouvelle 
image apparait. Un clic sur le bouton vous permet de naviguer 
entre les pages de votre site. 

Creer un album photo 

Le logiciel Cariboost permet d'inserer tres facilement un album photo 
au sein de vos pages web. Le logiciel se charge de creer 
automatiquement les vignettes correspondant a vos photos en taille 
reelle et inclut meme un diaporama pour une navigation plus aisee. Dans 
la version gratuite, 1' album photo ne peut contenir que 12 photos 
maximum. 

1 Activez la page Album Photo situee dans la colonne 
Navigation/ 'Pages/ 'Maquettes. Dans la barre d'outils principale, 
cliquez sur le bouton Album photo. Le module d' album photo 
comprend un Assistant arm de rendre sa creation particulierement 
simple et rapide (voir Figure 3.22). 

2 Cliquez sur le bouton Lancer I'assistant de creation de I'album 
photo. Dans la liste deroulante Palettes personnalisees, choisissez 
une palette de couleurs en accord avec votre maquette. Dans cet 
exemple, nous optons pour la palette Ocean. Validez par un clic 
sur le bouton OK. 

3 Par defaut, un bloc de six vignettes apparait, mais vous pouvez 
facilement personnaliser la mise en page en optant pour un 
modele parmi la dizaine d' options proposees (voir Figure 3.23). 
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Figure 3.22 : Proprietes d 'Album Photo 



Assistant de creation de l'album photo 



tous pouvez choisir une palette de couleur qui sera appiquee a votre album photo et une mise en forme 
predeftnie dans les listes ci-dessous. 




OK | Annuler 



Figure 3.23 : Selection d'une mise en page d'album 
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Le modele selectionne apparait dans la page, vide pour le 
moment. Cliquez de nouveau sur l'icone Proprietes. Cliquez sur le 
bouton Ajouter des images. 

Choisissez sur votre ordinateur un dossier contenant les images a 
afficher dans l'album photo afin de l'ajouter a la bibliotheque de 
ressources. Peu importe la taille de vos images, celles-ci seront 
automatiquement redimensionnees et optimisees pour le Web par 
le logiciel. Validez par un clic sur le bouton OK. 
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Figure 3.24 ; 

/A/out de 
photos dans 
l'album 



Cliquez sur le bouton Tester au sein de la barre d'outils principale 
pour visualiser un apercu de l'album photo dans Internet Explorer. 
Vos vignettes sont decoupees selon la mise en page choisie. 

Cliquez sur une vignette pour afficher 1' image en taille reelle et 
passer en mode Diaporama. II suffit de cliquer sur les fleches 
Avant et Arriere pour naviguer au sein de votre diaporama. Un 
clic sur la fleche vers le haut permet de retourner a la page Album 
Photo. 




Figure 3.25 

Apercu du 
diaporama 
dans le 
navigateur 
web 
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ASTUCE 



Navigation alternative dans le diaporama 

Si vous possedez une roulette sur votre souris, un emplacement vers 
l'avant ou l'arriere remplace les fleches du diaporama pour passer d'une 
photo a V autre. 



8 Si vous souhaitez afficher davantage de vignettes sur une seule 
page, modifiez la mise en page depuis la fenetre de proprietes de 
1' album photo. 

9 Le nombre de pages necessaire a la visualisation des vignettes 
s'actualise automatiquement. Vous pouvez ensuite creer de 
nouvelles pages d' album photo afin, par exemple, de realiser des 
selections thematiques. 

Inserer un menu dynamique 

Cariboost offre la possibility d'integrer un menu interactif a votre page 
web. Vous pouvez appliquer ce menu directement au sein d' une 
maquette de votre site afin de mettre a jour automatiquement toutes les 
pages de votre site. 

1 Editez la maquette de votre site. Dans la barre d'outils principal, 
cliquez sur la petite fleche situee a droite de l'icdne Bouton. 
Choisissez la commande Ajouter un menu dynamique (voir 
Figure 3.26). 

2 Le menu apparait au sein de votre page. Afin de le modifier, 
cliquez sur l'icdne Proprietes. 

3 Dans Ponglet General, vous pouvez modifier les libelles de votre 
menu. Remplacez Menul par le texte de votre choix, dans cet 
exemple Voyage aux Antilles. Votre nouveau libelle est 
enregistre automatiquement. 

4 Selectionnez l'intitule sous-menu puis modifiez son intitule dans 
le champ Norn du menu. Cliquez sur le bouton Modifier le lien afin 
de definir la page vers laquelle le sous-menu doit pointer. 
Selectionnez la page Album photo de votre site web et validez par 
un clic sur le bouton OK. 

5 Reproduisez cette manipulation afin de placer un lien vers toutes 
les pages de votre site web. Pour creer une nouvelle rubrique 
et/ou sous-rubrique, cliquez sur le bouton Nouveau menu (voir 
Figure 3.27). 
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Album photo Bouton 
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Figure 3.26 : 

Ajout d'un menu dynamique 



Proprietes du menu dynamique 



General Apparence Proprietes geometriques 
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Figure 3.27 : Organisation des elements du menu 
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Preparer son site au referencement 



6 Activez l'onglet Apparence pour determiner 1' aspect graphique 
de votre menu. Dans la section Menu principal, choisissez le type 
d' orientation : verticale ou horizontale. 

7 Choisissez la couleur des separateurs de menus, correspondant 
aux traits horizontaux et verticaux utilises pour differencier les 
libelles. Cochez la case Appliquer un style survole afin d'ajouter des 
effets de rollover et de modifier la couleur du texte. 



Proprietes du menu dynamique 



General Apparence Proprietes geometries 



Menu principal Sous-menus 



Verticale 



AaAaZz 



AaAaZz 



@ Appliquer un style suryole 

Couleur du texte 
Couleur d'arriere plan 
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Fond 
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AaAaZz 



Coin 3 px 

Couleur des separateurs 
Bordure 



Annuler 



Figure 3.28 : Aspect graphique du menu 

8 Validez par un clic sur le bouton OK. Les libelles choisis sont trop 
longs par rapport a la taille du menu. Afin de corriger ce 
probleme, selectionnez le menu et agrandissez-le en maintenant le 
bouton de la souris enfonce. 

9 Pour verifier le bon fonctionnement du menu, cliquez sur le 
bouton Tester afin de visualiser la page dans le navigateur. Lors 
du survol de la souris sur votre menu, 1' element place en 
sous-menu s'affiche a l'ecran et peut etre clique. 



Voyage aux Antilles 



Recit de voyage 




Figure 3.29 : Le menu depuis un navigateur web 



3.4. Preparer son site au referencement 

Pour le moment, votre page web est visible uniquement sur votre 
ordinateur. Afin de la rendre accessible a tous, vous devez ajouter les 
elements necessaires a son referencement. Cariboost inclut un Assistant 
destine a vous aider dans cette tache. 

1 Afin d'ajouter les informations necessaires au referencement de 
votre page, affichez la fenetre Proprietes de la page, accessible 
avec la commande Pages/Maquettes/Proprietes de la page. 



Les limites de la version gratuite 

IC t # 

La version gratuite de Cariboost ne permet pas d'acceder a 1' Assistant 
de referencement. La version Premium Personnel ou Professionnel est 
indispensable pour acceder a cette fonctionnalite. 



Cliquez sur l'onglet Referencement. Dans le champ litre de votre 
page web, indiquez un titre pour votre page. Dans le cas de 
publication d'un CV en ligne, indiquez votre nom mais aussi le 
poste recherche, par exemple : CV de Karine Warbesson, 
journaliste et auteur specialisee en informatique. 
En effet, lors d'une recherche dans les moteurs de recherche, il y 
a peu de chances qu'une recherche par mots-cles soit effectuee 
avec votre nom. Par contre, si un internaute tape les mots-cles CV 
journaliste, il est probable que ce CV arrivera en bonne 
position dans les resultats de recherche grace a ce titre. 

Dans le champ Mots-cles utilises par les moteurs de recherche, 
indiquez une liste de mots-cles susceptibles d'etre utilises pour 
rechercher votre page. Par exemple, CV, journaliste, auteur, 



98 



LE GUIDE COMPLET 



LE GUIDE COMPLET 99 



Creer gratuitement son premier site web 



emploi, presse ecrite, informatique, Internet, etc. Afin que la liste 
de mots-cles reste pertinente, entrez 10 a 15 mots-cles maximum. 

Inserez une courte description de votre site au sein du champ 
Description de la page web. Soyez bref et precis, en evitant dans la 
mesure du possible de repeter les termes entres dans la liste des 
mots-cles. Validez par un clic sur le bouton OK. 



Arriere plan Referencement Protection de page 



wncic (Jioi i 



Titre de votre page Web 



CV de Karine Warbesson, journaliste et auteur specialisee en informatique 



Mot des utilises par les moteurs de recherche 
CV, journaliste, auteur, ernploi, presse ecrite, informatique, internet 



Description de la page Web 



Articles et travaux publies par Karine Warbesson, specialisee dans les nouvellesjtechnolo 



Ok 



Annuler 



Figure 3.30 : Ajout des informations liees au referencement 

Visual isez un apercu de votre page au sein du navigateur Internet 
en cliquant sur le bouton Tester situe dans la barre d'outils 
principale. 

Afin de verifier que les informations de referencement ont ete 
correctement prises en compte par le logiciel, regardez le code 
source de la page. Dans Internet Explorer, selectionnez la 
commande Affichage/Source. Les informations precedemment 
entrees s'affichent dans l'en-tete de votre page, au sein des balises 
<TITLE>< META NAME= « keywords »> et <META 
NAME= « content »>. 
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3.5. Publier son site sur Internet 

Derniere etape dans la creation de votre site, la publication sur Internet. 
Cariboost offre un logiciel de publication integre afin de vous aider dans 
la mise en ligne de votre page web. 

1 Afin de proceder a la saisie des informations liees a votre serveur 
web, cliquez sur le bouton Publier situe dans la barre d'outils 
principale. Une boite de dialogue s'affiche a 1'ecran. Elle vous 
invite a entrer les informations de configuration liees a votre 
hebergeur. Validez par un clic sur le bouton OK. 

2 La fenetre Proprietes utilisateur apparait a 1'ecran. Cliquez sur le 
bouton Choisir un nouvel hebergeur. 

3 Dans la premiere liste deroulante, indiquez le pays de votre 
hebergeur, par defaut la France. 

4 Choisissez une formule d'abonnement dans la liste deroulante 
suivante. Les hebergeurs les plus courants tels que Free, Lycos 
Multimania ou Club-Internet sont repertories. Si votre hebergeur 
se trouve dans cette liste, selectionnez-le. Vous n'aurez plus qu'a 
inserer votre identifiant et votre mot de passe. Dans le cas 
contraire, cliquez sur le bouton Configuration manuelle. 



Proprietes espace web 



Choisir un nouvel hebergeur 



Hebergement: configuration manuele 



Aide a la publication 
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UMser le service FTP de Windows 
Mode pass* 
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Mot de passe 



webmasterSishensais.com 



Tester la connexion 















Chercher un dossier existant 
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Cette adresse est imoosee par votre hebergeur 
hUp://www.shensais.com/cariboost(H)/ 


http://w 


w.shensais.coml 



Adresse Internet fxjbfcque: 
http://www.shensais.com/cariboost(x)/ 



Figure 3.31 : Configuration des donnees FTP 
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Entrez le serveur hote, du type http://ftp.monsite.com 
ainsi que votre login et votre mot de passe. Afin de vous assurer 
de 1' exactitude des informations saisies, cliquez sur le bouton 
Tester la connexion. Indiquez, si vous le connaissez, votre dossier 
FTP distant, generalement le dossier www, ou utilisez le bouton 
Chercher un dossier existant afin selectionner un dossier. 

Entrez l'adresse de votre site, par exemple, 
http://www.monsite.com/. Ces informations vous sont 
fournies par votre hebergeur. Conservez les cases Utiliser le service 
FTP de Windows et Mode passif cochees par defaut puis validez par 
un clic sur le bouton OK. 




Logiciel FTP 

Le File Transfer Protocol (protocole de transfert de fichiers) ou FTP est 
dedie a l'echange informatique de fichiers. Le logiciel FTP est charge 
principalement de transferer les fichiers et dossiers situes sur votre 
ordinateur vers le serveur web de votre hebergeur. 



Cliquez de nouveau sur le bouton Publier. Le transfert de fichiers 
se deroule automatiquement. Rendez-vous sur votre site Internet, 
du type www.monsite.com/accueil.html afin de visualiser 
votre site. Tous les internautes qui se connecteront a cette adresse 
pourront desormais naviguer au sein de votre site web. 



REMARQUE 



Modifier les proprieties du site 

Si vous souhaitez modifier ulterieurement les proprietes liees a votre 
hebergeur, utilisez la commande Fichiers/Parametrer votre espace web 
courant puis modifiez les donnees de votre site. 



Aller plus loin 
avec Dreamweaver 



Installer Dreamweaver 104 

Demarrer avec Dreamweaver 1 06 

Inserer et mettre en forme du texte 122 

Inserer des images 127 

Placer des liens 1 33 

Structurer sa mise en page avec les tableaux et les CSS 137 

Inserer des elements multimedias 146 

Utiliser les formulaires 1 55 

Publier son site web avec I'outil FTP integre 160 
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Installer Dreamweaver 



Congu pour creer des sites plus evolues, Dreamweaver (tisseur de reves, 
en francais) vous aidera efficacement a accomplir vos projets de 
realisation de pages web. 

Principal editeur web utilise par les webmestres professionnels, 
Dreamweaver permet aussi aux utilisateurs debutants d' employer 
uniquement les fonctions essentielles a la creation de leur site sans faire 
appel a la moindre ligne de code grace aux nombreux Assistants 
disponibles. 

Dreamweaver permet de creer des pages simples et interactives avec 
videos, sons et animations multimedias mais integre egalement un 
logiciel FTP (File Transfer Protocol) pour une synchronisation constante 
de vos fichiers locaux et distants. 



4.1. Installer Dreamweaver 

Dreamweaver est une application disponible en version devaluation 
pour une periode de 30 jours a l'adresse www.adobe.fr. La version d'essai 
offre toutes les fonctionnalites de la version complete. Elle vous 
permettra de vous faire une idee precise des possibilites de V application. 

Pour installer Dreamweaver, procedez ainsi : 

1 La version d' evaluation de Dreamweaver pese 285 Mo ; une 
connexion haut debit est done indispensable. Apres avoir 
telecharge le logiciel, double-cliquez sur F executable. 




Figure 4. 1 : Une version devaluation de 30 jours est disponible sur le 
site d 'Adobe 



Selectionnez un repertoire d' installation, par defaut C:\Program 
Files\Macromedia\Dreamweaver CS3. Si vous souhaitez modifier le 
dossier d' installation par defaut, cliquez sur le bouton Modifier. 
Choisissez un nouvel emplacement sur votre disque dur puis 
validez par un clic sur le bouton OK. 



* Adobe Dreamweaver CS3 
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Figure 4.2 : Dreamweaver est installe par defaut dans le dossier 
Program Files 

Cochez la case Creer un raccourci sur le bureau afin de lancer 
rapidement Dreamweaver puis cliquez sur le bouton Suivant. 

L'ecran suivant liste 1' ensemble des extensions supportees par 
Dreamweaver. Conservez les cases cochees par defaut puis 
cliquez sur le bouton Suivant. 

Afin de demarrer 1' installation du programme sur votre 
ordinateur, cliquez sur le bouton Installer. L' operation dure moins 
de cinq minutes mais le temps varie selon la puissance de votre 
machine. 

Rendez-vous dans le menu Demarrer pour lancer l'application. La 
fenetre Activation des produits Macromedia apparaft. L' activation 
se deroule en ligne. Assurez-vous que votre connexion Internet est 
en marche puis entrez le numero de serie. 
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|S p i ogrammes 



/i Documents 
IS" Pararnetres 

Rechercher 



Cg Adobe Web Premium CS3 'W Adobe Dreamweavei CS3 



Q Internet 
CJJ.Utiftaires 
H Video 



► Q Adobe Flash CS3 Professional 

► Q Adobe Photoshop CS3 

► 'i|5 Adobe Fireworks CS3 



Figure 4.3 : /-'installation de Dreamweaver se deroule par defaut 
dans le dossier Program Files 

7 Pour tester 1' application, cochez la case Je souhaite essayer 
Macromedia Dreamweaver. Cliquez sur le bouton Continuer. La 
fenetre d' Assistant de projet s'affiche a l'ecran. 



4.2. Demarrer avec Dreamweaver 

Dreamweaver est un logiciel WYSIWYG ; "What you see is what you 
get", ce qui signifie en francais "vous obtenez ce que vous voyez". 
Depuis 1' interface de Dreamweaver, vous allez construire votre page 
web de A a Z et visualiser les modifications effectuees en temps reel. 

Cependant, avant de demarrer votre projet, il est necessaire de definir un 
nouveau site. Dreamweaver va creer un nouveau dossier sur votre 
ordinateur qui contiendra tous les fichiers (pages HTML, images, sons, 
videos, etc.) de votre site web afin de faciliter l'organisation des 
differents elements. Lors de cette etape, les informations de 
configuration de votre serveur web (fournies par votre hebergeur) vous 
seront egalement demandees. 



Creer un nouveau projet 



Avant de rentrer dans 1' interface de Dreamweaver, il est necessaire de 
configurer les informations indispensables a la publication en ligne de 
votre premier site web a l'aide de la fenetre Definition de site. 

1 A l'ouverture de Dreamweaver, l'Assistant de projet s'affiche a 
l'ecran. Selectionnez Site Dreamweaver dans la colonne Creer afin 
de creer un nouveau site vierge (voir Figure 4.4). 

2 La boite de dialogue Definition du site s'affiche a l'ecran. Elle va 
vous guider pas a pas dans la creation de votre site web, afin 
d'organiser et publier vos fichiers sur le serveur de votre 
hebergeur. 
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Ouvrir un element recent 


Creer 


Creer ii partlr d'un modele 


™ '; squetettes/chartevS.hlml 


T3 HTML 


^] Feuiles de Style (CSS) 


t"^ spip/article.html 


"2 ColdFusion 


7" ] Jeux de cadres 


T~] spipAubrique.html 


IS PHP 


T3 Page d'accueil (theme) 


T'^ spipfchartevS.html 


£5] ASP VBScript 


£3 Page cfaccueJ (de base) 


fijl spip/rubrique_old html 
^S] spipAubrique-olf html 


"] XSLT (page enliere) 

- CSS 


i*aa»-... ,■■. ,;,,:., ,J 




J*J spip/article_old.html 


■Q JavaScript 


Supplement 


|?jj squetettes/lnterface.css 
■**' Sourcebtmlv4/article.html 
Q Ouvrir... 


Q XML 
| Site Dreamweaver... J 


^ Dreamweaver Exchange » 


Q Plus... 


Q Mise en route » 

Q NouveNes fonctions » 


n 


Exploitez Dreamweaver an 
maximum 


^J Ressources> 




Pour les derniers conseBs, podcasts et bien 
plus encore, rende2-vous sur Adobe Bridge. 


Q N9|*is«itlcher 







Figure 4.4 ; La creation d'un nouveau site avec Dreamweaver 

Choisissez un nom pour votre site web, par exemple 
Souvenirsdevoyage. Indiquez son adresse web, definie lors de 
l'hebergement. Si vous avez reserve un nom de domaine, votre 
adresse sera du type www.monsite.com. Si vous avez fait appel a un 
hebergeur gratuit, il peut s'agir d'une adresse du type http://monsite 
.free.fr . Si vous utilisez un hebergeur gratuit, la mention www est 
generalement absente. Si vous avez un doute sur 1' adresse de 
votre site, laissez cette case vide, vous pourrez y revenir 
ulterieurement. 




Pour davantage a" informations sur la reservation du nom de 
domaine, consultez le chapitre 10, Publier et promouvoir son 
site web. 



A 



ATTENTION 



Nomsde fichiers 

Pour le nom de votre site mais aussi lors de la creation de vos pages 
HTML, evitez systematiquement d'utiliser espaces et accents dans les 
noms de fichier et/ou dossiers. Ainsi, vous n'aurez pas de probleme 
d' interpretation lors de la mise en ligne sur un serveur web. 
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4 Cliquez sur le bouton Suivant puis repondez Non a la question qui 
vous est posee puisque aucune technologie serveur ne sera utilisee 
au sein de votre site. Cliquez de nouveau sur le bouton Suivant 
afin de poursuivre la procedure de creation de site. 



Langage dynamique et technologie serveur 

ASP.NET, PHP, XML, des termes qui vous sont peut-etre familiers 
meme si vous n'avez jamais programme. Ces differents noms 
correspondent a des langages de programmation couramment utilises sur 
Internet, egalement appeles technologies serveur. 

Contrairement au HTML qui necessite uniquement votre navigateur pour 
etre interpreted ces differents langages de programmation font appel aux 
serveurs de votre hebergeur pour afficher correctement les elements de 
votre site web. lis creent souvent des bases de donnees pour stocker un 
grand nombre d' informations. 



Conservez 1' option, soit Modifier les copies locales surma machine, 
puis telecharger vers le serveur lorsque je suis pret. 

Par defaut, les fichiers de votre site sont stockes au sein du 
repertoire Mes Documents de votre ordinateur. Gardez le meme 
emplacement puis cliquez sur le bouton Suivant. 




® (4cdfm to! «l« tocalei '• 
C Modftw dfectement m to s 



w fcct*e»* pendarrt to devetoppement ' 

a machne. pm: IHocharga v«t to i«n< 

uar*daant:»aulo<al 



i bftquo je nij piet (taconvnandel 



Ou voutoz-voui itockai tot ttcheis pm vooe adhauu ? 
'«pngt^Cxx>«q_f > 'w*'»ie\Me»doeaii«nit\Sotivenf«tovoyaoe\ : <_} 



<&»cedgir]rSJvai«> |[ Wmtor 1 1 Arfe"" 



Figure 4.5 : 

Les fichiers de 
votre site sont 
stockes par 
defaut dans le 
dossier Mes 
Documents 
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7 La question suivante porte sur votre mode de connexion au 
serveur web. A la question Comment vous connectez-vous a votre 
serveur distant, selectionnez V option FTP au sein de la liste 
deroulante. 

8 Toutes les informations demandees dans les champs suivants vous 
sont fournies par votre hebergeur. Indiquez l'adresse FTP de votre 
site, le dossier distant au sein duquel vous souhaitez stocker vos 
fichiers (generalement www), votre nom d'utilisateur et votre mot 
de passe et cochez la case Enregistrer pour sauvegarder ces 
informations. Cliquez sur le bouton Tester la connexion. 



Definition du site pour Souvenirsdevoyage 




Comment voire comectej-vous h volte setveut distant ? 



Quel est le nom hote ou Tadiesse FTP de volte setveut Web ? 



i ptivltp.online.net 



Dans quel dpssiet du setveut voulej-vous stocket vos lichiets ? 



Quel est volte nom d'utSsateut FTP ? 



| webmastet@monsile. com 

Quel esl volte mot de passe FTP ? 



□ lM*e'SecuteFTP(SFTP) 



jEnregWrer 



T estet la connexion 



< Ptecedent Juivant > 



Figure 4.6 : Les informations de connexion a votre serveur web sont 
communiquees par votre hebergeur 

Un message s'affiche a l'ecran afin de vous indiquer si la 
connexion a pu etre correctement etablie. Si ce n'est pas le cas, 
verifiez les informations entrees ainsi que le bon fonctionnement 
de votre liaison Internet. De plus, si vous utilisez un pare-feu, 
assurez-vous que celui-ci n'entrave pas la connexion. 
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DEFINITION 



Pare-feu 

Un pare-feu (firewall en anglais) est generalement constitue d'un 
logiciel installe sur un ordinateur ; Son objectif est de filtrer les donnees 
d'un reseau informatique. Les pare-feu sont conseilles sur tout ordinateur 
connecte a Internet afin d'eviter les intrusions frauduleuses. Neanmoins, 
lors de la configuration de votre site web, n'oubliez pas d'ajouter 
Dreamweaver aux applications de confiance afin que le pare-feu 
n'empeche pas l'application d'acceder a votre serveur web. 



10 Cliquez sur le bouton Suivant. Si vous etes plusieurs a travailler 
sur un meme site web, selectionnez le bouton radio Oul, activer 
I'archivage et I'extraction afin de vous assurer qu'un fichier ne 
puisse etre modifie simultanement. Dans le cas contraire, 
selectionnez Non, ne pas activer I'archivage et I'extraction puis 
cliquez une derniere fois sur le bouton Suivant. Un resume des 
informations de configuration apparait. 



Definition du site pour Souvenirsdevoyage 



Elementaire Avarice 

Definition du site 




Votre sile dispose des paramelres suivanls : 

Infos locales : (Le dossier racine local sera cree) 

Nom du site :Souven«sdevoyage 

Dossier racine local :CADocuments and Sellings \Compaq_Proprielarre\Mes documenls\Souvei 

Infos distantes : 

Acces:FTP 

Hole FTP: privflponline.net 

Archivage/extiaction : Desadive. 

Serveur devaluation : 

Acces : A detinir ullerieuremenr. 



Vous pouvez conligurer votie sile a faide de fonglet Avance. 



lent j lermine 



Figure 4. 7 : Un resume des informations de configuration apparait 
dans la fenetre Definition de site 
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11 Cliquez sur le bouton Termine. La creation de votre site est 
complete. La fenetre de demarrage apparait de nouveau a l'ecran. 
Selectionnez HTML dans la colonne Creer afin de demarrer la 
realisation de la premiere page HTML du site 

Souvenirsdevoyage. 



REMARQUE 



Editer les informations du site 

Si vous souhaitez apporter des modifications aux informations entrees 
dans 1' Assistant Definition de site, activez la commande Site/Gerer les 
sites dans 1' interface principale de Dreamweaver. Selectionnez le nom 
de votre site puis cliquez sur le bouton Modifier. Depuis cette fenetre, 
vous pouvez egalement supprimer un site mais reflechissez bien avant 
d'effectuer cette operation qui sera irreversible. 



Les principaux panneaux de travail 

Dreamweaver utilise plusieurs panneaux modulables destines a mettre 
en forme textes et images. 

Si vous etes familier d'un autre logiciel du meme editeur tel que Flash 
ou Fireworks, vous serez rapidement a 1'aise avec l'utilisation des 
panneaux de Dreamweaver qui fonctionnement sur le meme principe. 

Si ce n'est pas le cas, cette section vous aidera a decouvrir les panneaux 
les plus importants, necessaires a la creation d'une page web dans le 
logiciel. 

Une interface sur mesure 

Les panneaux de travail sont entierement modulables. Vous pouvez les 
faire disparaitre de votre interface, ajouter de nouveaux panneaux, les 
deplacer ou les reduire afin qu'ils prennent moins de place. 

1 Par defaut, les panneaux de Dreamweaver encadrent votre 
interface de travail. Vous pouvez a tout moment les masquer ou 
les afficher avec la commande (F4J. 

2 Pour deplacer un panneau, placez votre curseur sur son angle 
superieur gauche, materialise par deux rangees verticales de 
pointilles. Votre curseur se transforme en fleches de direction. 
Maintenez le bouton de la souris enfonce et glissez deplacez votre 
panneau a l'endroit de votre choix. 
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\aJ Fichiers 




:-. 


Ipichiers J 






1 ilS» Souvenirsdevoy< v Affichage Ic v 


1 & c | 


€> t & ft 


,0 


£3 Site 


■ Souvenirsde voyage (C:\Doci 



Figure 4.8 : 

Deplacement d'un panneau 



3 Afin d'agrandir ou reduire un panneau, cliquez sur la fleche noire 
situee devant le nom du panneau. Reduire un panneau permet de 
gagner de la place tout en le laissant facilement accessible en cas 
de besoin. 

4 Chaque panneau dispose de nombreuses options accessibles par 
un menu contextuel en cliquant sur la liste situee dans Tangle 
superieur droit. Ces options varient selon la fonction du panneau 
utilise. 

5 Vous pouvez egalement reserver un espace plus ou moins 
important a vos panneaux de travail en cliquant sur la fleche 
situee sur chaque bordure de 1' interface principale. Les panneaux 
de travail s'etendent generalement au maximum sur deux 
colonnes, la place restante etant reservee a la zone de creation de 
votre page web. 




Figure 4.9 : Agrandissement ou diminution de I'interface 
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6 En fonction des outils utilises, agrandissez ou reduisez librement 
l'espace attribue a votre interface de travail ou aux panneaux, en 
placant votre curseur sur l'une des colonnes et en le deplacant 
vers la gauche ou la droite. 

7 Selon votre profil, Dreamweaver dispose d'une interface de 
travail adaptee accessible par le biais du menu 
Fenetre/Presentation de l'espace de travail. Lors de la creation 
de page web, vous pouvez a tout moment revenir a l'une des 
interfaces par defaut. 

8 L'espace de travail Designer est reserve aux debutants ou a ceux 
qui ne veulent pas controler le code de la page web tandis que 
I'interface Codeur est reservee aux programmeurs qui souhaitent 
utiliser les fonctions avancees de Dreamweaver. L'espace Double 
Affichage affiche simultanement l'inspecteur de code et les 
panneaux de mise en page. 




Figure 4. 10 : L'espace de travail Designer est destine a ceux qui ne 
souhaitent pas inserer manuellement du code dans leur page 

9 Pour enregistrer un espace de travail personnalise, cliquez sur le 
menu Fenetre/Presentation de l'espace de travail/Enregistrer la 
presentation active. 
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10 L'interface personnalisee sera accessible a tout moment avec la 
commande menu Fenetre/Presentation de I'espace de travail. 

Cette fonctionnalite est particulierement pratique si vous partagez 
votre ordinateur avec une autre personne utilisatrice de 
Dreamweaver afin que chacun puisse retrouver rapidement une 
interface de travail familiere. 



Gerer les presentations de I'espace de travail 



Karine 

Lena 

Victor 



OK 



Renommer, 



jupprimer 



Figure 4.11 : Un espace de travail personnalise selon I'utilisateur 

11 Vous pouvez a tout moment renommer ou supprimer les espaces 
de travail enregistres avec la commande Fenetre/Presentation de 
I'espace de travail/Gerer. 



REMARQUE 



Afficher facilement plusieurs pages HTML 

Dreamweaver permet d'ouvrir plusieurs pages simultanement, 
accessibles grace aux onglets situes dans la partie superieure de la zone 
de travail. Si vous souhaitez reorganiser la mise en page de vos 
documents ouverts, faites appel aux options Cascade, Mosai'que 
horizontale et Mosai'que verticale du menu Fenetre. 



Le panneau Fichiers 

Le panneau Fichiers vous permet de visualiser en un clin d'ceil 
l'arborescence de votre site. II s'agit d'un panneau particulierement utile 
pour controler plus facilement la navigation au sein de vos pages. 
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Selectionnez le menu Fenetre/Fichiers afin d' afficher le panneau 
Fichiers. Tous les fichiers du site en cours apparaissent dans le 
panneau Fichiers. Pour ouvrir rapidement une page de votre site, 
double-cliquez sur son nom dans le panneau Fichiers. 

Pour supprimer une page de votre site, selectionnez-la dans le 
panneau Fichiers puis appuyez sur la touche |Suppij . La 
suppression est irreversible. De nombreuses autres fonctions sont 
accessibles depuis le menu contextuel disponible en cliquant du 
bouton droit sur le fichier selectionne. 

Ce panneau sert egalement a synchroniser les mises a jour avec le 
site distant. Afin de mettre un jour une page web sur le serveur de 
l'hebergeur, selectionnez la page dans le panneau Fichiers puis 
cliquez du bouton droit. Choisissez le lien Synchroniser. La mise a 
jour est immediate. 



▼ Fichiers 

Fichiers 



Actifs Fragments de code 



Souvenirsdevoyage 



Aff ichage local 



& c I $ 



m 



■ ^^n^Ki%uM 



Site - Souvenirsdevoyage (C:\Documents and Settings* 



accueil.html 



mm_dashedjine.gif 
gl mm_health_nutr.css 
W mrn_health_photo.jpg 
[xj mm_spacer.gif 



Figure 4. 12 : Le panneau Fichiers est particulierement utile pour 
mettre a jour votre site web 

4 Un journal des mises a jour est a votre disposition afin de verifier 
le bon deroulement de la synchronisation entre vos fichiers locaux 
et distants. 



La barre d'outils Insertion 

La barre d'outils Insertion permet d'integrer les principaux elements 
susceptibles d'intervenir dans une page web tels que textes, images, 
liens, animations Flash, video, son, etc. 
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La barre d'outils Insertion, accessible via le menu 
Fenetre/lnsertion, est placee en haut de 1' interface de 
Dreamweaver, juste en dessous du menu principal. Elle est 
affichee par defaut et ne peut etre deplacee. 

Dans la liste deroulante situee a gauche se trouvent les differents 
elements mis a votre disposition. En passant sur chaque icone, un 
descriptif s'affiche dans une info bulle. 



▼ Insertion 

$ El &, 


Commun 


, . 

Mise en forme Formulaires Donnees Spry Texte Favoris 


SPIP_DW-Assistanl 




accueil.html 




• |Medias|| 







Figure 4. 13 : Une info bulle s'affiche lors du passage de la souris sur 
les icones de la barre d'outils 

3 Cette barre d'outils vous permet d'integrer la majorite des 
elements necessaires a la construction d'une page web mais aussi 
de mettre en forme du texte. 

4 Par defaut, la barre d' insertion affiche les elements communs a la 
plupart des pages web tels que liens, tableau ou image, mais aussi 
des scripts prets a l'emploi pour inserer la date ou une applet 
Java. 



La fenetre Proprieties 

La fenetre Proprietes permet d'acceder aux proprietes des elements ou 
objets de votre page en mode Creation arm d'editer taille, couleur, 
alignement, lien, etc. Cet inspecteur s'adapte automatiquement aux 
elements selectionnes pour afficher uniquement les proprietes 
correspondantes. 

Ainsi lors d'un clic sur une image, la fenetre Proprietes n'affichera que 
les options liees a l' image. Mais si vous cliquez sur un lien, seules les 
options liees a l'affichage et a V insertion du lien seront visibles dans 
cette meme fenetre Proprietes. 

1 La fenetre Proprietes, egalement appelee inspecteur de proprietes 
s'affiche depuis le menu Fenetre/Proprietes. Ecrivez un texte au 
sein de la zone principale en mode Creation. 

2 Selectionnez votre texte en maintenant le bouton de la souris 
enfonce. La fenetre Proprietes affiche les differents parametres 
modifiables. 
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Figure 4. 14 : L'inspecteur de proprietes permet de modifier les 
proprietes du texte selectionne 

3 Cliquez dans le champ Taille afin de modifier la taille. Le 
changement se repercute sur le texte selectionne. 



Mode Code ou mode Creation ? 

Dreamweaver propose une interface modulable selon vos besoins et 
votre niveau. Si vous etes debutant sans notion de HTML, le mode 
Creation s'avere le mieux adapte. Ce mode vous permet par le biais 
d'Assistants de placer les elements de votre page web sans connaissance 
de la programmation. 

Si vous avez quelques notions de HTML ou souhaitez intervenir plus en 
detail dans le code, vous pourrez utiliser le mode Code qui affiche en 
permanence I 'integrality du code de votre page web. Un mode mixte, 
accessible avec le bouton Fractionner, est egalement a votre disposition 
pour un apprentissage progressif du HTML. 

Procedez ainsi : 

1 Apres avoir defini les parametres de votre site, la boite de 
dialogue Macromedia Dreamweaver 8 s'affiche de nouveau a 
1'ecran. Dans la section Creer a partir d'un modele, cliquez sur le 
dossier Pages d'accueil (theme) (voir Figure 4.15). 



DEFINITION 



HTML 



Le HTML (Hyper Text Markup Langage) est a la base de toute page 
web. II s'agit du langage utilise pour mettre en forme les principaux 
elements d'une page tels que textes, images, formulaires, etc. Le langage 
HTML est compose de balises ouvrantes et fermantes qui seront ensuite 
interpreters par un navigateur Internet. Grace a Dreamweaver, le code 
HTML est automatiquement insere dans la page sans qu'il soit 
necessaire de s'en preoccuper. 
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Pour les derniers conseils, podcasts et bien 
plus encore, rendez-vous sur Adobe Bridge. 


i i Ne plus afficher 



Figure 4. 15 ; Le dossier Pages d'accueil contient des pages web 
pretes a I'emploi 

2 La fenetre Nouveau document s'affiche a l'ecran. Dans la 

colonne Exemple de page, selectionnez la page Sante et Nutrition - 
Page d'accueil. Conservez les autres options par defaut et cliquez 
sur le bouton Creer. 
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Figure 4. 16 : Le modele Sante et Nutrition - Page d'accueil propose 
par Dreamweaver 



La fenetre Enregistrer sous apparait a l'ecran. Nommez la page 
accueil.html puis cliquez sur le bouton Enregistrer. 

Une boite de dialogue s'affiche afin de vous demander si vous 
souhaitez copier les fichiers dependants, c'est-a-dire les images et 
autres documents necessaires au bon affichage de la page. 
Acceptez en cliquant sur le bouton Copier. 

L'interface principale de Dreamweaver s'affiche afin que vous 
puissiez personnaliser votre page. Trois modes de visualisation 
sont disponibles : Code, Fractionner et Creation. Cliquez sur le 
bouton Creation. L' affichage du code source disparait et la page 
de modele selectionnee apparait dans Dreamweaver. 

Vous pouvez a tout moment afficher le code source de la page tout 
en conservant un apercu de votre page en cliquant sur le bouton 
Fractionner. 




Figure 4.17 : Le mode Fractionner affiche simultanement code et 
page web 
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Definir les proprietes de la page HTML 

Lors de la creation d'une nouvelle page HTML, Dreamweaver vous 
permet de configurer au sein d'une meme fenetre les proprietes de 
couleur de votre texte et de vos liens, le type d'arriere-plan utilise et son 
titre. 

Procedez ainsi : 

1 Afin d'acceder aux proprietes de votre page, selectionnez la 
commande Modifier/Proprietes de la page. La fenetre Proprietes 
de la page apparait a l'ecran. La categorie Aspect s'affiche par 
defaut. 

2 Le champ de texte Image d'arriere-plan permet de selectionner 
1' image qui sera utilisee en fond de votre page web. Laissez ce 
champ vide afin de choisir une couleur d'arriere-plan. 

3 Indiquez dans le champ Couleur d'arriere-plan la couleur a utiliser 
en fond de votre page. Cliquez sur la petite fleche situee dans 
Tangle inferieur droit du carre de couleur. 

4 Un nuancier apparait a l'ecran afin de selectionner une couleur. 
Gardez le bouton de la souris enfonce et relachez-le sur la couleur 
choisie. Si votre page contient du texte, privilegiez de preference 
un fond clair pour une couleur de texte sombre. 



Proprietes de la page 



Categoi 




Aspect 









Image d'arriere-plan 


1 


[ Parcourir... | 


Arriere-plan 


. #FFFFFF 




Tgxte 


H #000000 


Uens asites ; F "J #05EOB3 


Liens 


Hi #006600 


Liens actif s : |~^| | 



Marge gauche : 
Marge haut : 



Largeyr de marge : 
Hauteur de marge ! 



Annuler 



Figure 4. 18 : La fenetre Proprietes de la page 

5 Procedez de la meme facon pour selectionner la couleur du texte 
ainsi que la couleur des liens. Le lien actif correspond a un lien 
sur lequel on a clique au moins une fois. 
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6 Entrez dans les champs Marge gauche et Marge droite la taille des 
marges a gauche et a droite de la page. Les champs Marge haut et 
Marge bas specifient la taille des marges en haut et en bas de la page. 

Pour apprendre a creer et a optimiser une image d'arriere-plan 
pour votre page web, reportez-vous au chapitre 8, Optimiser ses 
images pour le Web. 

7 La categorie Titre/codage de la fenetre Proprietes de la page vous 
permet de specifier un titre pour la page web. Ce titre s'affiche en 
haut de votre page web. II est utilise lors du referencement de 
votre site. 
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Souvenirs de voyage 



Figure 4. 13 : Apercu du titre de la page dans Internet Explorer 



Pour davantage d' informations sur le referencement d'un site 
web, reportez-vous au chapitre 9, Referencer son site web. 

Le codage correspond au type d' alphabet utilise pour votre site. 
Dans le cas ou vous souhaiteriez realiser une page web en arabe ou 
en chinois, selectionnez le codage adequat dans la liste deroulante 
pour une bonne interpretation des caracteres au sein du navigateur. 




Type dedocimert (DID) : XH'Mi l.OlranMWinel 
Codage : Europe occidertale 



Dossier du document : ...iet«re\Mesdocuments\Souverwsdevoyege\ 
Dossier du site : ...iete(re\Mesdocuments\Souvenirsdeyoyage\ 



OK Annuler I I AppSquer 



Figure 4.20 : Definition du titre et du type d'alphabet utilise dans la 
page 
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9 Enregistrez les modifications appliquees en cliquant sur le bouton 
OK puis enregistrez immediatement la page avant de poursuivre 
sa creation. Selectionnez la commande Fichier/Enregistrer sous. 
Votre page va etre sauvegardee dans le dossier 
Souvenirsde Voyage . 

4.3. Inserer et mettre en forme du texte 

Avec Dreamweaver, 1' insertion et la modification de texte se fait par 
1' intermediate de la barre d'outils Insertion, de la fenetre Style CSS et 
de l'inspecteur de proprietes. La connaissance du HTML s'avere 
totalement optionnelle. Neanmoins, vous pouvez a tout moment 
visualiser ou intervenir manuellement sur le code source en passant en 
mode Code ou Fractionner depuis la barre d'outils Document. 

Modifier la mise en page avec les style CSS 

Les feuilles de style, egalement appelees CSS (Cascading Style Sheets en 
anglais, feuilles de style en cascade en francais) sont desormais le 
standard conseille pour definir les proprietes de texte de vote page web. 
Dreamweaver dispose d'un panneau dedie aux feuilles de style afin de 
vous aider a reussir facilement la mise en page de votre site. 

1 Assurez-vous d'etre en mode Creation pour visualiser un apercu 
de la page web. Ouvrez la page accueil.html enregistree 
precedemment dans le site Souvenirsdevoyage avec la commande 
Fichier/Ouvrir. 

2 Selectionnez le titre Message d'accueil, supprimez-le en appuyant 
sur la touche [Suppr] puis remplacez-le par le texte de votre choix. 
La mise en forme par defaut sera personnalisee grace a la fenetre 
de styles. Conservez le titre en surbrillance (voir Figure 4.21). 

3 Le style utilise pour ce titre se nomme PageName, tel qu'affiche 
dans la liste deroulante Style. Pour modifier les autres proprietes 
du titre, vous devez modifier ce style avec la fenetre Styles CSS, 
accessible avec la commande Fenetre/Styles CSS. 

4 La fenetre Styles CSS affiche toutes les proprietes du style 
PageName : police, couleur, taille, espacement de lettres, etc (voir 
Figure 4.22). 
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305» 




pe modele de Page d'accueil est ideal pour introduce le 
contenu de votre site Web. Pratiquement latotalite de son 
contenu peut etre personnalisee, y compris les images, le textej 
et les liens. Vous pouvez choisir de conserver les graphiques » 
proposes ou les remplacer par les votres. 



Figure 4.21 : Le texte a modifier est en surbrillance 



Resume de la selection 



CSS 



Styles CSS 



Elements PA 



Tous Actuel 



font 



letter-spacing 
line-height 



Hpx Arial, Helvetica, s. 

#CC0u0u 

normal 

inherit 



Uproposde "color" [j^j 

(T\ color est definie dans la regie "td" dan. 



Proprietes de "id" 



font 

letter-spacing 
line-height 
Aiouter unepro,.. 



JRj #CC0000 
Hpx Ariel, Helvetica, sa. 
normal 
inherit 



Figure 4.22 : 

La fenetre Style CSS 



5 Afin de modifier la couleur du titre, double-cliquez sur la ligne 
color. Vous pouvez soit indiquer manuellement le code couleur a 
entrer, soit cliquer sur le carre de couleur afin de choisir une autre 
teinte. 
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Inserer et mettre en forme du texte 



Choisissez un marron fonce (#993300) puis validez en appuyant 
sur la touche |hp] . La modification est immediatement repercutee 
sur la page. 

Pour modifier police et taille du titre, la manipulation est 
similaire. Double-cliquez sur la ligne font au sein de la fenetre 
Styles CSS puis entrez manuellement les parametres a modifier. 
Specifiez une taille de 20 pixels et conservez les polices Arial, 
Helvetica, Sans-serif. Validez en appuyant sur la touche (jh). 




MANGIR.A.TOKYO 

fce model© de Page d'accueil est ideal pour introdul 
contenu de votre s8e Web. Pratiquement la totalite 
contenu peut etre personnalisee, y compris les im 
et les liens. Vous pouvez choisir de conserver les 
proposes ou les remplacer par les v6tres. 



i.e texte de cette page est destine a vous aider a 
conception de votre site en vous conseHlant le typj 
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Resume de la selection 

20px Arial, Helvetica, sans-serif 
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Proprietes de ".pageNarne" 

color ■ #993300 

font 20px Arial, Helvetica, sans-serif 

letter-spacing 0.21em 

line-height 26px 

Ajouter une prop... 






3= *zl|***| 



fi * 9 



Figure 4.23 : Modification d'un style CSS 

8 Si vous souhaitez modifier d'autres elements de texte de votre 
modele, vous devrez a chaque fois personnaliser le style utilise 
par le biais de la fenetre de style CSS. 



Modifier du texte avec la fenetre Proprietes 

Si vous souhaitez modifier ponctuellement quelques elements de texte 
dermis par un style CSS, la fenetre Proprietes s'avere particulierement 
appropriee. Vous pourrez notamment acceder aux parametres de taille, 
d'alignement, de police et de couleur de texte. 



REMARQUE 



Affichez la fenetre Proprietes, accessible depuis le menu 
Fenetre/Proprietes. Selectionnez la premiere phrase situee sous le 
titre correspondant au message d'accueil en maintenant le bouton 
de la souris enfonce. Le texte s'affiche en surbrillance. Dans la 
fenetre Proprietes, placez votre curseur dans la liste deroulante 
Style. 

Le style utilise se nomme body text. Afin de mettre en valeur cette 
premiere phrase et la differencier du reste du texte, vous pouvez 
choisir un autre style de la liste Style. La mise en page du nom de 
style vous donne un apercu du resultat que vous obtiendrez dans 
la page web. 
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Figure 4.24 : Modification des options de texte avec la fenetre 
Proprietes 

3 Si aucun style propose dans la liste Style ne vous convient, vous 
pouvez modifier la mise en page d'un mot ou groupe de mots 
selectionne directement depuis la fenetre Proprietes. 



Fenetre de styles CSS ou fenetre de proprietes 

Bien qu'il soit possible de modifier taille, police et alignement 
directement au sein de la fenetre Proprietes, il est aujourd'hui conseille 
de privilegier la fenetre Styles CSS pour les longs textes et paragraphes 
utilisant la meme mise en forme et de ne modifier directement les 
parametres depuis la fenetre Proprietes que pour les mots ou groupes de 
mots, afin d'eviter d'alourdir votre page web avec du code HTML 
inutile. 
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La police utilisee par ce modele de Dreamweaver est Arial, 
reconnue par tous les ordinateurs. Si vous souhaitez modifier la 
police, selectionnez votre texte avec la souris puis selectionnez 
une autre police dans la liste deroulante Police. Macromedia 
propose des listes de trois polices, la premiere police correspond a 
celle affichee par defaut dans le navigateur. 



Inserer du texte depuis une autre application 

Vous pouvez copier dans Dreamweaver un texte issu d'un traitement 
de texte ou d'une autre page Internet. Selecti onne z le texte a dupliquer 
puis choisissez la commande Edition/Copier ( |Ctrl) +fc]). Passez dans 
Dreamweaver, placez votre curseur a rendro it so uhaite dans votre page 
puis choisissez la commande Edition/Coller ( [Ctrlj +fv]). Si votre texte 
possede deja une mise en forme, le code HTML de votre page peut en 
etre alourdi. 



Pour modifier la taille du texte, entrez une nouvelle valeur dans le 
champ Taille. Plus la taille de police est importante, plus la taille 
des caracteres augmente et inversement. 

Afin de mettre en valeur un element de texte, la fenetre Proprietes 
permet de lui affecter des styles gras et italiques. Cliquez sur le 
bouton B (bold en anglais signifie "gras") ou I (style italique). 

Pour modifier la couleur du texte, cliquez sur le carre de couleur 
situe a droite du champ Taille. Choisissez une teinte dans le 
nuancier ; la nouvelle couleur de texte s'affiche dans la page web. 
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Figure 4.25 : La fenetre Proprietes de texte. 



Inserer des images 



Depuis la fenetre Proprietes, vous pouvez egalement intervenir 
sur l'alignement du texte mais aussi le justifier en cliquant sur les 
icones correspondantes apres avoir selectionne le texte. 

Depuis les autres champs de la fenetre Proprietes, il est possible 
de modifier la couleur ou d'ajouter des listes a puce et des listes 
numerotees en cliquant sur les icones Liste simple et Liste 
Numerotee. Les elements de liste sont automatiquement inseres en 
appuyant sur la touche a la fin d'une phrase ou d'un 
paragraphs 



Configurer les navigateurs 

Pour afficher a tout moment un aper?u de votre page HTML dans un 
navigateur Internet, selectionnez la commande Fichier/Apercu dans le 
navigateur. Votre navigateur par defaut (generalement Internet Explorer) 
est automatiquement ajoute a la liste des navigateurs. Mais pour tester 
correctement une page web, il est conseille d' installer un second 
navigateur (Firefox ou Opera par exemple) et de l'ajouter a la liste des 
navigateurs avec la commande Fichier/Apercu dans le navigateur/ 
Modifier liste des navigateurs. 



4.4. Inserer des images 



Les images servent a habiller un texte mais sont aussi utilisees pour 
creer boutons et interfaces de navigation. Elles constituent la cle d'une 
mise en page reussie et peuvent egalement etre placees en arriere-plan 
pour remplacer le traditionnel fond uni. 

Dreamweaver vous permet de definir precisement les proprietes de vos 
images. II dispose egalement des outils necessaires pour realiser des 
retouches rapides et efficaces sans passer par un logiciel de graphisme. 

1 Placez votre curseur a l'endroit ou 1' image doit etre inseree Dans 
la barre d'outils Insertion, affichez les icones de la rubrique 
Commun. Selectionnez l'icone Image dans le menu qui apparait 
puis cliquez sur la fleche noire afin de derouler la liste Image. 
Selectionnez de nouveau l'option Image (voir Figure 4.26). 

2 La boite de dialogue Selectionnez la source de I'image apparait. 
Choisissez un fichier image sur votre ordinateur. Quatre formats 
d' image sont disponibles pour le Web : GIF, JPEG, JPG et PNG. 
Validez votre choix par un clic sur le bouton OK. 
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Commun ▼ ^ S 

.;[ Code : ^j Fractionner j __g|| Creation Titre 




HI 

**'' Espace reserve pour I'image 
| \] Image survolee 
& HTML Fireworks 
Barre de navigation 



Xj Dessiner une zone reactive rectangulaire 
O Dessiner une zone reactive ovale 
t7 Dessiner une zone reactive polygonale 



Figure 4.26 : Ajout d'image depuis la barre d'outils Insertion 



l n Pour davantage d 'informations sur les formats d'image utilises 
£,,..' sur le Web, reportez-vous au chapitre 8, Optimiser ses images 
pour le Web. 

3 Si votre image se trouve dans un autre dossier que celui defini 
pour votre site web, une fenetre apparait afin de vous demander si 
vous souhaitez copier le fichier au sein du dossier racine, c'est-a- 
dire le dossier ou se trouve deja la page HTML sur laquelle vous 
travaillez. Cliquez sur le bouton Oui. 



Eviter les erreurs 404 

Les erreurs 404 sont ces pages qui apparaissent dans le navigateur lors 
d'une erreur de lien, signifiant que la page n'a pas ete trouvee sur le 
serveur. II est important de veiller a la bonne organisation de vos fichiers 
pour eviter ces messages qui nuiront a I'image de votre site web. 



La boTte de dialogue Copier Fichier sous s'affiche. Afin de copier 
I'image dans le repertoire de votre site, cliquez sur le bouton 
Enregistrer. 

La fenetre Attributs d'accessibilite des balises d'image vous 
propose d'inserer un titre secondaire. Donnez un nom a votre 
image dans le champ Texte secondaire (utilise le cas echeant dans 
les navigateurs dedies aux personnes souffrant de handicaps 
visuels). Specifiez eventuellement une adresse web relative a 
I'image puis cliquez sur le bouton OK. L' image est 
automatiquement inseree dans votre page HTML. 
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Ce modele de Page cfaccueil est ideal pour introduce le : 

contenu de votre Site Web. Pratiquement la totalite de son ; 
contenu peut erre personnaSsee, y compris les images, le texte: 
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proposes ou les remplacer par les votres . | 
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Figure 4.27 : Une nouvelle image inseree dans une page web 



Modifier les proprieties d'une image 

Depuis la fenetre Proprietes, Dreamweaver offre la possibilite de 
modifier les dimensions de I'image et permet de determiner l'alignement 
de I'image par rapport a du texte et par rapport a la page. 

1 Afin d'afficher et modifier les proprietes de votre image, 
selectionnez-la en cliquant dessus puis ouvrez la fenetre 
Proprietes depuis le menu Fenetres/Proprietes. 



REMARQUE 



Poids plume recommande 

Meme si le haut debit se generalise, il est recommande de verifier 
regulierement le poids des images inserees dans une page web pour ne 
pas alourdir inutilement votre site. Dans la fenetre Proprietes, vous 
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trouverez plusieurs informations liees a votre image. Le poids est 
indique dans Tangle superieur gauche. 



2 Afin de modifier les dimensions d'une image, entrez les valeurs 
souhaitees dans les champs L (largeur) et H (hauteur). Lors de 
1' insertion d'une image dans une page web, ses dimensions sont 
automatiquement affichees dans l'inspecteur de proprietes. 



A 



Modifier les dimensions de I'image 
Les dimensions de votre image sont disponibles dans la fenetre 
Proprietes et indiquees par defaut en pixels. Evitez de modifier les 
dimensions de votre image directement dans Dreamweaver. Ces 
transformations degradent la qualite de I'image et entrainent une 
deformation si le ratio largeur/hauteur d'origine n'est pas conserve. 



3 Afin d'acceder a davantage d' options, cliquez sur la petite fleche 
blanche situee dans Tangle inferieur droit de fenetre Proprietes. 
De nouvelles options sont desormais disponibles. 
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Figure 4.28 : La fenetre Proprietes permet de modifier les images de 
votre page 

Trois icones d'alignement (gauche, centre et droite) vous 
permettent de definir la position de T image au sein de la page 
web. Selectionnez votre image. Cliquez sur Tune des icones afin 
de modifier sa position. 

Afin de definir l'alignement d'une image par rapport a du texte, 
vous devez faire appel a la liste deroulante Aligner. Pour mettre 
cette fonction en pratique, ecrivez un paragraphe d'une dizaine de 
lignes a gauche de I'image. 

Plusieurs options sont a votre disposition au sein de cette liste 
deroulante : 

— Ligne de base : le bord inferieur de I'image est aligne sur la 
ligne de base du texte. 

_ Haut : le bord superieur de I'image s' aligne sur la premiere 
ligne de texte. 
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— Milieu : la ligne de base du texte est alignee sur le milieu de 
I'image. 

— Bas : le bord inferieur de I'image est aligne sur la ligne de base 
du texte. 

— Haut du texte : I'image est alignee sur le bord superieur du 
texte. 

— Milieu absolu : le centre de I'image est aligne sur le milieu de la 
ligne. 

— Bas absolu : le bord inferieur de I'image est aligne sur le bord 
inferieur de la ligne. 

— Gauche et droite : ces options determinent l'alignement du 
texte a gauche ou a droite de I'image. 

7 Afin d'eviter que le texte soit "colle" a I'image, il est necessaire 
de specifier des espaces verticaux et horizontaux autour de 
1' image. Indiquez une valeur en pixels dans les champs Espace V 
pour Espace Vertical et Espace H pour Espace Horizontal. Des 
valeurs de 2 a 5 pixels sont generalement suffisantes pour aerer la 
mise en page. 




Figure 4.23 : 

Les options 
d'alignement de la 
fenetre Proprietes 

8 Enregistrez votre page avec la commande Fichier/Enregistrer puis 
ouvrez-la dans un navigateur Internet en appuyant sur la touche 



[F12] afin de controler la mise en page. 
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Figure 4.30 : 

Une image alignee 
avec du texte 
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Retoucher une image dans Dreamweaver 

La fenetre Proprietes propose plusieurs options afin de realiser des 
retouches rapides de taille, de luminosite, de recadrage ou de contraste. 

1 Selectionnez 1' image inseree dans votre page en cliquant dessus. 
Dans la section Modifier de l'inspecteur de proprietes d' images, 
cliquez sur l'icone Recadrer. Une boite de dialogue s'affiche afin 
de vous avertir que les changements effectues modifieront 
definitivement 1' image. Cliquez sur le bouton OK afin de 
poursuivre le recadrage. 

2 Placez le curseur sur les poignees de recadrage et maintenez le 
bouton de la souris enfoncee afin de recadrer la photo. Pour 
valider les modifications, appuyez sur la touche (+j). Pour revenir 
en arriere et annuler le recadrage, vous devrez obligatoirement 
faire appel a la commande Edition/Annuler. 
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Figure 4.31 : Recadrer une photo depuis la fenetre Proprietes 

Depuis la section Modifier de la fenetre Proprietes, vous pouvez 
egalement ajuster luminosite et contraste en cliquant sur l'icone 
correspondante apres avoir selectionne votre photo. 

Deplacez la reglette afin d'augmenter ou diminuer les valeurs de 
luminosite et contraste tout en controlant le resultat sur V image en 
temps reel, en cochant la case Apergu. Lorsque vous etes satisfait 
du resultat, validez par un clic sur le bouton OK. 

Si vous souhaitez ameliorer une image legerement floue, faites 
appel a l'icone Accentuer, accessible au sein de la section Modifier 
de la fenetre Proprietes. Augmentez la valeur d' accentuation pour 
renforcer la nettete de V image en depla?ant la reglette vers la 
droite en maintenant le bouton de la souris enfonce. 
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Figure 4.32 : 

La fonction 
Accentuer 
diminue le flou 
d'une image 

6 Pour des retouches plus precises ou pour ameliorer l'optimisation 
de vos images a destination du Web, les icones Edition et Optimiser 
ouvrent directement le logiciel Fireworks, a condition que vous 
l'ayez bien sur prealablement installe sur votre ordinateur. 



4.5. Placer des liens 

Un lien hypertexte est un mot ou une phrase destines a naviguer vers 
une autre page Internet, une page interne a votre site, une adresse mail 
ou un fichier a telecharger. Les liens peuvent etre places sur du texte 
mais aussi sur des images. 

lis sont par defaut soulignes et de couleur bleu, mais la generalisation 
des feuilles de style modifie de plus en plus 1' aspect des liens. 



Inserer un lien sur du texte 

1 Afin d' inserer un lien sur du texte, selectionnez un mot ou un 
groupe de mots en maintenant le bouton de la souris enfonce. Le 
texte selectionne apparait en surbrillance. 

2 Dans l'inspecteur de proprietes, placez le curseur dans le champ 
Lien. Inserez un lien vers un site web, sans omettre la mention 

http://. 
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ATTENTION 



N'omettez pas la mention http:// 

Le protocole http:// (Hyper Text Transfert Protocol) utilise pour definir 
une adresse web doit etre obligatoirement specifie dans le champ Lien de 
la fenetre Proprietes pour etre fonctionnel, meme si celui-ci est souvent 
facultatif lors de la saisie dans le navigateur Internet. 



Le mot ou groupe de mots selectionne apparait souligne dans 
Dreamweaver mais celui-ci n'est pas fonctionnel au sein de 
1' application. Afin de tester le lien, ouvrez votre page dans un 
navigateur Internet en cliquant sur la touche [F12] . 

Une boite de dialogue apparait afin de vous demander si vous 
souhaitez enregistrer les modifications. Cliquez sur le bouton Oui. 

Votre page HTML s'affiche dans le navigateur Internet. Placez 
votre souris sur le lien ; 1' adresse correspondant au site web 
apparait dans la Barre des taches. Cliquez sur le lien ; la page du 
site web remplace votre page web. 




instructions 



educateurs 



besoms particuliers 




! A TOKYO 

Ce modele de f\J d'accueii est 
ideal pour introduce le contenu 
de votre site Web . Piatiquement 
la totalite de son contenu peut 
etre personnalisee, y compris les 
images, le te>.te et les liens. 

Vous pouvez choisit de conserve/ les graphi<|ues proposes ou 

les remplacer par les votres 




jj Poste de travail 



Figure 4.34 : U adresse du lien s'affiche dans la barre des taches du 
navigateur 

6 Revenez dans Dreamweaver. Afin de specifier l'ouverture d'une 
nouvelle fenetre pour votre lien, selectionnez 1' option _blank dans 
le champ Cible de l'inspecteur de proprietes. 
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Desormais, lorsque vous cliquez sur le lien au sein de votre 
navigateur, c'est une nouvelle fenetre qui s'ouvre en plus de la 
fenetre actuelle contenant votre page HTML. II est conseille 
d'indiquer une cible _blank pour tout lien vers un site exterieur au 
votre afin que l'internaute puisse plus facilement poursuivre la 
visite de votre site. 

Le principe reste similaire afin d'inserer un lien vers une page de 
votre site et non vers un site Internet ; selectionnez un mot ou un 
groupe de mots. Dans le champ Lien de l'inspecteur de proprietes, 
cliquez sur Ficone Rechercher le fichier symbolise par un petit 
dossier jaune situe a droite. 



Lien [article. html v Q> 



*% 



Rechercher le fichier 



®> (Q [Proprietes de la page... 



Figure 4.35 : 

Lien vers un fichier 
interne a votre site 



9 La boite de dialogue Selectionner un fichier s'affiche. Choisissez 
la page HTML qui sera utilisee pour le lien. Vous devez Favoir 
prealablement preparee. Celle-ci doit se trouver dans le repertoire 
de votre site pour eviter toute erreur de navigation. Validez par 
OK. 

10 Pour inserer une adresse mail, selectionnez le texte correspondant 
dans votre page web en indiquant F intitule mailto: devant 
F adresse au sein du champ Lien de l'inspecteur de proprietes. Par 
exemple, mailto : karine@yahoo . f r. 




Contactez-nous sur notre adresse e- 



«g] mailto:karine77@yahoo.fr 



I Poste de travail 



Figure 4.36 : Lin die sur I' adresse email entraTne automatiquement 
l'ouverture du logiciel de messagerie 

11 Ouvrez la page dans un navigateur Internet avec la touche |F12) . 
Un clic sur le lien email entraine Faffichage de votre logiciel de 
messagerie. L' adresse specifiee dans le lien est automatiquement 
inseree dans le champ Destinataire du message. 
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Inserer un lien sur une image 

Dreamweaver vous permet de placer un lien en cliquant sur une image 
mais aussi de decouper votre image afin d'y placer plusieurs liens 
distincts. 

1 Apres avoir insere une image dans votre page web, 
selectionnez-la puis indiquez dans la fenetre Proprietes un lien 
dans le champ Lien. II peut s'agir d'un lien vers un site web, vers 
une autre page de votre site ou vers une adresse mail. 



[MANGER A TOKYO 

Ce modele de Page d'accueil est ; 
ideal pour introduire le contenu ; 
■ de votre site Web . Pratiquement ; 
la totalite de son contenu peut ; 
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images , le texte et les liens. ; 
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Figure 4.37 : Insertion d'un Hen sur une image 

Afin de differencier dans le navigateur web les images cliquables 
des images non cliquables, vous pouvez inserer une bordure. 
Indiquez une largeur de bordure dans le champ Bordure de la 
fenetre Proprietes. Votre image apparait avec un cadre de couleur 
semblable a celle choisie pour les liens de texte. 

Vous pouvez egalement inserer un lien sur une partie de 1' image 
uniquement ; on parle alors de carte image ou a" image reactive. 
Apres avoir selectionne votre image, placez votre souris dans 
Tangle inferieur gauche de la fenetre Proprietes. Selectionnez 
l'une des formes proposees et dessinez sur votre image la zone 
reactive de votre image qui contiendra le lien. 



DEFINITION 



Image reactive 

Une image reactive, egalement appelee image map ou carte-image, est 
une image contenant plusieurs liens hypertextes. II s'agit d'une technique 
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demon souvent utilisee pour creer une barre de navigation a partir d'une 
image realisee dans un logiciel de graphisme. Dreamweaver permet 
de decouper votre image en rectangle, en rond ou en polygone depuis 
l'inspecteur de proprietes pour des decoupes precises. 



La fenetre Proprietes se transforme afin que vous puissiez inserer 
un lien qui sera actif uniquement dans cette partie de 1' image. 
Dans le champ Lien, supprimez le signe # et inserez le lien 
hypertexte. Specifiez sa cible dans le champ Cible. Vous pouvez 
ajouter au sein d'une meme image autant de zones reactives que 
vous le souhaitez. 
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Figure 4.38 : Creation d'une image reactive 

4.6. Structurer sa mise en page 
avec les tableaux et les CSS 

Utilises traditionnellement pour presenter des donnees chiffrees, les 
tableaux sont egalement employes dans la creation de page web afin de 
caler les differents elements et creer des mises en page elaborees. 

Aujourd'hui, on utilise egalement de plus en plus des balises DIV, plus 
faciles a moduler et personnalisables avec les feuilles de style. 
Dreamweaver propose des structures pretes a l'emploi associees a des 
feuilles de style qu'il suffit de personnaliser. 
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Utiliser les structures pretes a I'emploi 
de Dreamweaver 

Grace aux modeles de conception de pages proposes par Dreamweaver, 
vous pouvez utiliser pour vos pages web des structures pretes a I'emploi 
au sein desquelles images et textes ont deja ete agences au sein de 
cadres invisibles. 

Procedez ainsi : 

1 Dans 1' interface principale de Dreamweaver, selectionnez la 
commande Fichier/Nouveau. La fenetre Nouveau document 
s'affiche a l'ecran. 

2 Choisissez l'option Modele vierge puis activez la categorie 
Modele HTML dans la section Type de modele. Selectionnez le 
modele 3 colonnes liquides, en-tete et pied de page. Validez en 
cliquant sur le bouton Creer. Le modele choisi apparait dans 
1' interface principale de Dreamweaver. 



Type de modete : 

■; Modele ASP JavaScript 

'■ £ Modeie ASP VBScript 

r: Modele asp.NET c* 

•^ Modete asp.NET ve 

f| Mode»e CotdFutton 

*^2 Modete HTML 

flg Modete JSP 

ft ModetePHP 



tee en forme 

2 cotonnes hybrides, encadre a drorle. I 
2 colonnes hybrides, encadre a gauche 
2 colonnes hybrides , encadre a gauche 
2 colonnes liquides, encadre a dro*e, < 
2 colonnes bqurdes, encadre a drorte. 
2 colonnes bquides, encadre" a gauche, 
2 colonnes bquides, encadre a gauche. 
2 colonnes etesuques, encadre" a drotfe 
2 colonnes iiasucwes, encadre a drorle 
2 colonnes eiastrques, encadr* a gaud 

2 colonnes, etastique, encadre a gaucf 

3 colonnes fixes 

3 colonnes fixes, en-tete et pied de pa 
3 colonnes hybr ides, en-tfte et pied d< 
3cotonneshybrides. 

3 colonnes fcqipdes 

|3 cotonnes fcqudes. en-tete et pied dej 



SL 



smi 



3 colcrin-i ( loutes tei larg«urs en poutcentaoe, en-tfte 
rtpWdepaoa. 



3 cc4oones a poiitlonnemert absofcj 
3 cotcones a po5*ionr«ment atwcJu, ef 
3 coloones eiasOques 
3 coknnes elawigues, en-l«lo et [»ed . 



OocTyoe: 
CSSdenn! 
LWlefkhWCSS: 



XHIM I.OIraniilionnel 



nforaie: [AJouter *hnHi«___ _ J| 



| Oeet 



Figure 4.39 : Une structure simple en trois colonnes avec en-tete et 
pied de page 



DEFINITION 



Structure liquide, elastique ou fixe 

Ces trois termes employes par Dreamweaver definissent le type 
d' interface selectionnee. L' interface liquide est composee de tableaux en 
pourcentage, qui s'adapteront automatiquement a la resolution d'ecran de 
l'internaute. Dans la structure fixe, les valeurs entrees sont en pixels. 
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0N Enfin, la structure elastique fait appel a des mensurations en em, 

unite relative qui permet a 1' interface de s'adapter selon la taille de 
la police. 



Les bordures de tableau, invisibles au sein du navigateur Internet, 
s'affichent en pointille dans Dreamweaver. Tous les modeles de 
page incluent une feuille de style par defaut que vous pouvez 
facilement personnaliser. 




Figure 4.40 : Les bordures des tableaux invisibles s'affichent en 
pointille dans Dreamweaver 

4 Cliquez sur la bordure exterieure ; un cadre bleu entoure votre 
tableau principal. Les dimensions de ce tableau ont ete specifiees 
en pourcentage. En definissant une taille de tableau en 
pourcentage, le contenu du tableau s'adaptera automatiquement a 
la resolution d'ecran de l'utilisateur. 

5 Cliquez sur la bordure de la colonne de gauche afin de visualiser 
les delimitations de votre cadre. Son apparence (bordure, taille, 
etc.) et la mise en forme du texte places a l'interieur sont 
modifiables par l'intermediaire des styles CSS. 



LE GUIDE COMPLET 139 



Chapitre 4 



Aller plus loin avec Dreamweaver 




Clsw INC-AkH* 



Contenu principal 

Lorem ipsum dolor sit amet, consectetuer 
adiplscing elit. Praesent aliquam, Justo convallis 
luctus rutrum, erat nulla fermentum dlam, at 
nonummy quarn ante ac quam. Maecenas urna 
purus, fermentum Id, molestle in, commodo 
porttitor, felis. Nam blandit quam ut lacus. 
Quisque omare risus quls ligula. Phasellus 
tristique purus a augue condimentum adipisdng. 
Aenean sagittis. Etiam leo pede, rhoncus 
venenatis, tristique In, vulputate at, odlo. Donee 
et Ipsum et sapien vehicula nonummy. 
Suspendisse potentl. 

en-tete de niveau H2 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Praesent aliquam, justo convallis 
luctus rutrum, erat nulla fermentum dlam, at 
nonummy quam ante ac quam. Maecenas urna 
purus, fermentum id, molestle in, commodo 
porttitor, fells. Nam blandit quam ut lacus. 
Quisque ornare risus quis ligula. Phasellus 
tristique purus a augue condimentum adipiscing. 
Aenean sagittis. Etlam leo pede, rhoncus 
venenatis, tristique In, vulputate at, odlo. 



la couleur de 
I'arriere-plan de cet 
element dlv est 
affichee sur la 
largeur du contenu 
unlquement. SI 
vous preferez une 
ligne de 

separation, placez 
une bordure sur le 
cote droit de 
I'element dlv 
SmainContent si 
vous savez qu*ll 
possedera toujours 
plus de contenu 
que I'element dlv 
»sldebar2. 

Donee eu mi sed 
turpis feugiat 
feuglat. Integer 
turpis arcu, 
pellentesque eget, 
cursus et, 
fermentum ut, 
sapien. 



Figure 4.41 

des CSS 



La mise en forme se deroule par /'intermediate 



6 Afin de personnaliser cette page, selectionnez le texte, 
supprimez-le avec la touche [Suppij puis remplacez-le par votre 
propre texte. Le style utilise pour le texte est affiche depuis la 
fenetre Proprietes. Vous pouvez creer un nouveau style pour ce 
texte ou modifier le style existant depuis le panneau CSS. 

7 Visualisez un apercu du resultat en appuyant sur la touche |F12| . 
Enregistrez votre page avec la commande Fichier/Enregistrer 
sous. 



Inserer des tableaux invisibles 

Apres avoir visualise des structures pretes a I'emploi de Dreamweaver, 
cette section est consacree a la creation d'une interface a base de 
tableaux invisibles, pour positionner precisement textes et images. Les 
tableaux invisibles sont egalement souvent utilises lors du decoupage 
automatique d'une charte graphique dans un logiciel de retouche 
d'images. 

Procedez ainsi : 

1 Creez une nouvelle page HTML avec la commande 
Fichier/Nouveau. Selectionnez Page vierge puis optez pour une 
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page HTML sans mise en forme par defaut. Validez en cliquant sur 
le bouton Creer. 

2 Selectionnez la commande Insertion/Tableau. Une ligne de 
tableau apparait dans la page. Afin d' inserer une nouvelle ligne ou 
une nouvelle colonne, cliquez du bouton droit dans le tableau et 
selectionnez la commande Inserer ligne ou Inserer colonne. Un 

tableau est compose principalement des elements suivants : 

— Ligne : informations disposees horizontalement dans le 
tableau ; 

informations disposees verticalement dans le 



Colonne : 
tableau ; 

Cellule : 
Bordure : 
(facultatif). 



intersection entre ligne et colonne ; 

cadre entourant les lignes et cellules du tableau 



Afin d' inserer plusieurs lignes simultanement, cliquez du bouton 
droit et choisissez la commande Inserer des lignes et des 
colonnes dans le menu contextuel. Dans le champ Lignes, 
indiquez 4 afin de placer 4 lignes dans votre tableau. Dans le 
champ Colonnes, specifiez la valeur 3. 

Pour modifier les proprietes du tableau, vous pouvez egalement 
faire appel a fenetre Proprietes. Indiquez 100 dans le champ 
Largeur du tableau et optez pour une valeur en pourcentage en 
choisissant Pourcent dans la liste deroulante des unites. Specifiez 
une valeur de dans le champ Bordure. 
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Figure 4.42 : La fenetre Tableau definit les options de votre tableau 
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Un site web compatible avec toutes les resolutions d'ecran 

La resolution d'ecran correspond a la qualite d'affichage a l'ecran. 
Plus la resolution est importante, plus les details de 1' image seront 
representes avec finesse. 

Actuellement, la resolution moyenne est de 1 024 * 768 pixels. Vous 
pouvez done choisir d'utiliser ses dimensions pour votre tableau ou 
inserer des dimensions en pourcentage afin d'adapter automatiquement 
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votre page a la resolution de l'internaute, qu'elle soit inferieure ou 
superieure. 

Neanmoins, lors de la creation de votre page web, reflechissez toujours a 
la cible visee. Un site destine a un public d'informaticiens pourra 
proposer une configuration plus avancee avec une resolution importante et 
de nombreux elements multimedias, tandis qu'un site a vocation familiale 
se devra d'etre plus accessible afin de repondre aux besoins des 
configurations les plus modestes. 
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Figure 4.44 : Les dimensions du tableau se definissent dans la 
fenetre Proprietes 



Fusionner des cellules 

1 Votre tableau apparatt dans la zone principale de Dreamweaver. 
Placez votre curseur dans la premiere cellule tout en maintenant le 
bouton de la souris enfoncee afin de selectionner les trois cellules 
horizontales. Une bordure noire entoure les trois cellules. 

2 Cliquez du bouton droit et selectionnez la commande 
Tableau/Fusionner les cellules dans le menu qui apparatt a 
l'ecran. 



Creer des tableaux imbriques 
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Figure 4.43 : Fusion de trois cellules de tableau 

3 Vos trois cellules ont ete regroupees afin de constituer une seule 
cellule dans laquelle le titre de votre tableau sera place. 

Modifier les proportions des cellules 
du tableau 

1 Placez votre curseur dans la colonne de gauche de la fenetre 
Proprietes. Indiquez 20% dans le champ L. 

2 Renouvelez V experience dans la colonne de droite. Votre tableau 
est correctement proportionne, avec 60% de sa surface consacree 
a la partie centrale dans laquelle les informations importantes 
seront inserees. 



1 Placez votre souris dans la colonne de gauche. Fusionnez les trois 
cellules de la colonne avec la commande Tableau/Fusionner les 
cellules accessibles depuis le menu contextuel. 

2 Par defaut, votre curseur clignote au centre de la cellule. Dans la 
fenetre Proprietes, selectionnez Haut au sein du champ Vert 
(Vertical) afin de placer votre tableau imbrique en haut de la 
cellule. 

3 Selectionnez de nouveau la commande Insertion/Tableau. Inserez 
un tableau de 5 lignes et 1 colonne avec une largeur de 100% et 
une largeur de bordure de dans la colonne de gauche. C'est au 
sein de ce tableau que la navigation sera inseree. 

4 Inserez deux nouveaux tableaux de 2 lignes et 1 colonne dans la 
premiere cellule de la colonne centrale avec une largeur de 
100%, afin qu'ils s'adaptent automatiquement a la taille de la 
fenetre. 

5 Specifiez une valeur de 2 dans le champ Remplissage et Espac. De 
cellule de la fenetre Proprietes afin d'eviter que le texte ne colle 
aux bordures du tableau. 



Modifier I'alignement de votre tableau 

Comme pour le texte, vous pouvez depuis la fenetre Proprietes 
modifier I'alignement de votre tableau : Gauche, Centre ou Droite depuis 
la liste deroulante Aligner. 
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Ajouter une couleur d'arriere-plan 

1 Dans le tableau imbrique cree dans la colonne de gauche, 
selectionnez une cellule puis choisissez une couleur d'arriere-plan 
depuis le champ Ar-pl de la fenetre Proprietes. Reproduisez cette 
manipulation dans chaque cellule du tableau pour creer une barre 
de navigation harmonieuse. 



TITHE DU SITE WEB 
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Figure 4.45 : 

Une barre de 
navigation 
creee a partir 
de tableaux 
imbriques 



Placez le curseur dans la premiere cellule du nouveau tableau cree 
dans la colonne centrale. Dans la fenetre Proprietes, choisissez un 
rose clair grace au nuancier propose dans le champ Ar-pl (Arriere- 
plan). Le code hexadecimal correspondant a votre couleur est 
automatiquement insere. 

Ajoutez un dernier tableau de 2 lignes et 1 colonne dans la 
colonne de droite. Inserez une couleur d'arriere-plan dans la 
premiere cellule puis placez textes et images a votre convenance. 
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Figure 4.46 : Une interface realisee a partir de tableaux imbriques 
dans Dreamweaver 
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Pour davantage d 'informations sur Vinsertion de texte et 

d f images, reportez-vous aux sections Inserer du texte et Inserer 

des images de ce chapitre. 

Sur le meme principe, selectionnez une couleur d'arriere-plan 
pour les autres lignes et colonnes. Si vous preferez utiliser une 
image d'arriere-plan, employ ez le champ Ar-pl situe au-dessus du 
champ Brdre ou du champ Image ar-pl des Proprietes du tableau. 

Afin de visualiser votre mise en page dans un navigateur, appuyez 
sur la touche |F12) . Votre page est structured pour agencer 
facilement textes et images. Les bordures du tableau sont 
invisibles. 
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Lorem irj 

consetetur sadipscing elrtr. sed di 

sed diam 



Titre du site Web 



ipsum dolot sit amel consetetur sadipscing elrtr. sed diam 

ipsum dolot sit amel conseletui sadipscing elrtr. sed diam 

ipaum dolor sit amel. consetetur sadipscing elrtr. sed diam 

ipsum dolot sit amel consetetut sadipscing eiitr. sed diam 

Lorem ipsum dolot sit amel, consetetut sadipscing elftt, sed diam 

Lorem Ipsum dolot sit amel consetetut sadipscing elrtr, sed diam 

Lorem ipsum dolot sit amel consetetut sadipscing elrtr. sed diam 

iet consetetut sadipscing etltr, sed diam. Lotem ipsum dolor sit amel. 

Lorem ipsum dolot sit amel, consetetur sadipscing elitt. 



Un exemple de tin* 

Lorem Ipsum dolor sll amet consetetur sadipscing elrtr, sed diam Lorem ipsum dolor sit amel. 

consetetur sadipscing elttr. sed diam Lorem ipsum dolor sit amet, consetetur sadipscing elrtr. 

sed diam Lorem ipsum dolot sit amet consetetut sadipscing elrtr, 

sed diam. Lorem ipsum dolor sit amet. consetetur sadipscing elrtr, 

sed diam. Lorem ipsum dolor sit amel consetetur sadipscing elrtr, 

sed diam Lorem ipsum dolot sit amet consetetur sadipscing elrtr, 

sed diam. Lorem ipsum dolor sit amet, consetetur sadipscing elrtr, 

sed diam. Lorem ipsum dolor sit amet, consetetut sadipscing elrtr, 

sed diam Lorem ipsum dolor sit amet, consetetur sadipscing elrtr. 

sed diam. 




Un exemple de tine 

Lorem ipsum dolot sit amet. 
consetetur sadipscing eKtr, 
sed diam Lorem Ipsum dolot 
srt amet. consetetur 
sadipscing elitr. sed diam 
Lorem Ipsum dolot sit amel 
consetetur sadipscing entr. 
sed diam Lorem ipsum dolor 
sit amet. consetetur 
sadipscing elitr, sed diam. 
Lotem Ipsum dolot sit amet. 
consetetur sadipscing elitr. 
sed diam Lotem Ipsum dolor 
sit ajiet, consetetur 
sadipscing eBtr. sed diam 
Lotem ipsum dolot sit amet, 
consetetur sadipscing elitr, 
sed diam Lorem Ipsum dolor 
sit amet, consetetur 
sadipscing etltr, sed diam 
Lorem Ipsum dolor sit amet, 
consetetur sadipscing elitr. 
sed diam. Lorem ipsum dolor 
sit amel consetetur 
sadipscing elrtr, sed diam 



£}T«nr>6 



j Posted 



Figure 4.47 : Le resultat final dans un navigateur Internet 



Un tableau qui prend toute la page 

Si vous souhaitez que votre tableau corresponde exactement a la taille 
de votre ecran, assurez-vous que les valeurs de marge sont nulles dans la 
fenetre Proprietes de la page, accessible avec la commande 
Modifier/Proprietes de la page. 
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4.7. Inserer des elements multimedias 

Dreamweaver ne se limite pas a 1'insertion de textes et d'images. Avec 
la generalisation du haut debit, videos, sons, musique et animation Flash 
prennent une part de plus en plus importante dans la creation de pages 
web. 



Integrer un fichier video 

L'insertion de fichiers video s'effectue dans Dreamweaver a l'aide d'une 
commande dediee qui se charge d' inserer dans la page web le lecteur 
correspondant, necessaire a la lecture de la video sur le Web. 

De nombreux formats video partagent le marche de la visualisation en 
ligne parmi lesquels Quick Time, Real Player ou Windows Media 
Player. Selon le type de lecteur choisi, votre video pourra etre importee 
au format *.avi, *.mov, *.wmv, actuellement parmi les plus utilises. Si 
l'internaute ne possede pas le lecteur correspondant au fichier video 
insere, il pourra le telecharger gratuitement sur le site de l'editeur 
correspondant. 

Pour cela : 

1 Activez la commande Insertion/Medias/Plug-in puis selectionnez 
un fichier au format video sur votre ordinateur. Votre video 
apparait sous la forme d'une icone grise au sein de Dreamweaver. 




Plug-in 

Un plug-in (de 1' anglais to plug, brancher) est un module externe 
charge d'ajouter de nouvelles fonctionnalites a un autre programme. 
Ainsi, afin de lire de la video dans un navigateur Internet, il est parfois 
necessaire de telecharger le plug-in correspondant au format de la video. 



Par defaut, 1' icone video est de petite taille (32 * 32). 
Selectionnez-la et modifiez ses dimensions afin de l'ajuster a 
celles de votre video depuis la fenetre Proprietes de plug-in, grace 
aux options L (Largeur) et H (Hauteur) (voir Figure 4.48). 

Pour tester votre page, selectionnez Fichier/Apercu dans le 
navigateur. Si vous possedez les plug-ins correspondant au 
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format, vous pourrez lire votre son en cliquant sur le bouton 
Lecture et visualiser directement la video. 




Figure 4.49 : Une video au format Quick Time inseree dans une page 
web 
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Figure 4.48 : Le fichier video est symbolise dans Dreamweaver par 
une petite icone grisee 
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Sonoriser une page web 

Vous pouvez sonoriser votre page web en y ajoutant une musique de 
fond. Plusieurs criteres doivent etre pris en compte lors de l'ajout de 
sons tels que le choix du format et la duree du son. 

Si votre site s'adresse a un public equipe avec du haut debit, le poids de 
votre son peut monter jusqu'a 1 Mo environ. Dans le cas contraire, ne 
depassez pas une centaine de kilooctets arm que la page reste accessible 
aux connexions bas debit. 

Si vous souhaitez partager avec les internautes de votre site un morceau 
musical, n'oubliez pas qu'afin de respecter les droits d'auteur, la duree 
du morceau ne peut exceder 30 secondes. Au-dela, vous devrez vous 
acquitter des frais correspondants a 1' achat du morceau musical. 



Procedez ainsi : 

1 Pour inserer du son dans une page HTML, selectionnez la 
commande Insertion/Medias/Plug-in. Selectionnez sur votre 
ordinateur un fichier son et enregistrez-le dans le dossier 
correspondant a votre site web. 

2 Plusieurs formats de son peuvent etre utilises dont l'extension 
varie : *.wav, *.mid et *.mp3 sont les principaux. Le format MP3 
offre le format de compression le plus important, avec le meilleur 
compromis poids/qualite ; il constitue le format a privilegier pour 
votre page web. 



Sclcctionncr un fichier 



Regaider dans 



de lichier dans :(•) Systeme de Ichiers 
O Souces de donnees 


Sites el serveurs... | 


Ai-Losl 


f . 



m- 



^BEEEOEESa 



" Air TakieWalki 1 Venus.mp3 

i) Air Tafce Walki 2 Cherry Blossom Gi 

*) Ai Takie Walki 3 Run.mp3 



U 



Air Takie Walki 6 SurfiY on a Rock.mp3 
Air Takie Walki 7 Another Day.mp3 



i) Air Takie Walli 4 Universal Travel.mpJ 
£ Air Talkie Waki S Mike Mifc.mp3 



Type: Winamp media file *ha Beta Gaga. m p3 
Taie : 6,61 Mo Sobg*al.mp3 






Nom rju fichier : Air Takie Waki Alone in Kyoto mp3 

Fichieis de iype . Tous les lichieit f .") 



URL: 
Rela«a: 



;iite7//WMusique/A«Losb'Aii Takie Waki Alone in Kyolomp3 Paramelres 



v accueilhlml 



Changer le fen relati dans la definition du site. 
Le lichiei choisi ne se tiouve pas a la tacine du site. 



Figure 4.50 : 

Le format 
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privilegier 
pour 

I'insertion de 
son dans une 
page web 
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Votre son est integre a votre page web sous la forme d'une icone 
de 32 pixels de large sur 32 pixels de haut, comme precedemment 
pour la video. Afin de visualiser correctement le lecteur musical 
pour lancer le son, indiquez des dimensions de 200 pixels de large 
dans le champ L et 25 pixels de haut dans le champ H au sein de la 
fenetre Proprietes de plug-in. 

Afin d'ecouter votre son, cliquez sur le bouton Lire situe dans la 
fenetre Proprietes. Selon le type de son choisi, 1'internaute pourra 
lire directement le son sur son ordinateur ou devra telecharger le 
plug-in correspondant au fichier son choisi. 

Indiquez a 1'internaute comment arreter le son dans le cas ou 
celui-ci l'incommoderait ; s'il est dans un lieu public, par 
exemple. Vous pouvez indiquer au-dessus du lecteur materialise 
une simple phrase invitant 1'internaute a cliquez sur le bouton 
Stop du lecteur pour arreter le son, par exemple. 

Appuyez sur la touche [F12] afin de visualiser un apercu dans le 
navigateur Internet. Un lecteur de son est automatiquement 
integre a la page web. Vous pouvez arreter le son ou faire une 
avance rapide en appuyant sur les boutons correspondants. 



Appuyez sur le bouton Stop pour arreter la musique. 



Figure 4.51 : Lecture d'un son dans une page web 



Inserer une animation Flash dans une page 
HTML 

Grace a Dreamweaver, vous pouvez inserer une animation Flash dans 
une page web automatiquement, sans vous preoccuper du code HTML 
necessaire a l' integration. 

1 Ouvrez la page HTML dans laquelle vous souhaitez inserer 
r animation Flash avec la commande Fichier/Ouvrir. Selectionnez 
un fichier sur votre disque dur. 
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iS" Pour davantage d> informations sur la creation d'une 
REN voi animation Flash, reportez-vous an chapitre 6, Creer des 
animations pour le Web avec Flash. 

2 Si vous avez recemment modifie la page HTML que vous 
souhaitez utiliser, vous pouvez egalement faire appel a la 
commande Fichier/Ouvrir les fichiers recents. 

3 Choisissez 1' animation Flash a inserer dans Dreamweaver avec la 
commande Insertion/Medias/Flash. L' animation Flash a inserer 
doit etre au format SWF. 

4 Une icone symbolisant 1' animation Flash apparait dans la page. 
Ouvrez la fenetre Proprietes et specifiez le document Flash a 
inserer depuis le champ de formulaire Fichier. 

5 Une boite de dialogue apparait pour copier le nouvel element dans 
le repertoire de votre site. Cliquez sur le bouton Oui. Apres 
selection de votre fichier, validez par un clic sur le bouton 
Enregistrer dans la fenetre Copier Fichier sous qui s'affiche a 
1'ecran arm de sauvegarder 1' element dans le dossier de votre site. 

6 La fenetre Attributs d'accessibilite des balises objet s'affiche a 
1'ecran. Elle permet d'ajouter un descriptif supplemental aux 
objets inseres afin de faciliter la navigation sur le Web des 
personnes souffrant de deficits visuels, auditifs, etc. Les 
informations restent facultatives. 

7 Indiquez eventuellement un titre pour votre objet afin de decrire 
1' animation Flash inseree. Validez par un clic sur le bouton OK. 

8 L' animation est inseree dans la page HTML et le code 
correspondant automatiquement genere. 



Le diaporama <le mon voyage 



Figure 4.52 : 

Insertion d'une animation 
Flash 
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Modifier les proprietes de l'animation 

Une animation Flash peut etre modifiee et visualisee dans Dreamweaver 
sans passer par le Flash Player. 

1 Afin de visualiser l'animation dans l'interface de Dreamweaver, 
selectionnez-la en cliquant dessus puis ouvrez la fenetre 
Proprietes. Cliquez sur le bouton Lire ; l'animation est jouee au 
sein de Dreamweaver. Cliquez sur le bouton Arret pour editer de 
nouveau l'animation dans Dreamweaver. 



Hash, 14K 




FKhier ts/Souvenirsdevoyage/CANARD.SWF Q Q [P Modifier, 

■ sre r 



Q, _J | Retablir la taille 



0Boucle EspaceV 

Lecture auto Espace H 



Qualite Haute v Aligner Pardefaut 



Echelle Par defaut (afficher tout) v Ar . p | 



Figure 4.53 : La fenetre Proprietes d'une animation Flash 

En placant le curseur sur un angle de l'animation, des poignees de 
redimensionnnement s'affichent pour modifier la taille de 
l'animation Flash. Si vous souhaitez retablir la taille originale, 
cliquez sur le bouton Retablir la taille. 

Afin de modifier rapidement l'animation Flash dans 
Dreamweaver, cliquez sur le bouton Modifier situe dans la fenetre 
Proprietes. Flash s'affiche a 1'ecran, a condition que 1' application 
ait ete prealablement installee sur votre ordinateur. 



Creer des animations Flash 
avec Dreamweaver 

Grace a Dreamweaver, vous pouvez creer rapidement des animations 
simples au format Flash afin d'ajouter boutons interactifs et textes 
animes. 

Inserer une barre de navigation en Flash 

Grace a la fonction de creation de boutons Flash integree a 
Dreamweaver, vous pouvez rapidement ajouter un bouton Flash au sein 
de votre page HTML mais aussi creer une barre de navigation animee. 

1 Ouvrez la page HTML dans laquelle vous souhaitez inserer le 
bouton Flash avec la commande Fichier/Ouvrir. 
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Selectionnez la commande Insertion/Medias/Boutons Flash. La 
fenetre Inserer le bouton Flash s'affiche a l'ecran. 

Dreamweaver propose par defaut plusieurs styles de boutons. 
Choisissez un style parmi les modeles proposes que vous pouvez 
visualiser dans la zone Echantillon. 

Dans le champ Texte du bouton, entrez le texte de votre choix. 
Choisissez la police, la taille du texte. 

Affectez un lien a vote bouton en inserant l'adresse dans le champ 
Lien puis choisissez une cible. S'il s'agit d'une page externe, 
indiquez la cible blank. Dans le cas contraire, vous pouvez 
conserver la meme fenetre. 

Par defaut, la couleur d'arriere-plan du bouton est le blanc. Si 
votre site web possede un arriere-plan colore, indiquez dans ce 
champ la couleur correspondant a votre fond pour eviter des 
contours disgracieux. Pour choisir precisement la couleur 
correspondant au fond de votre page, deplacez le curseur sur la 
couleur a selectionner ; celui-ci se transforme en pipette. Cliquez 
pour enregistrer la couleur. 



[ Inserer le bouton Flash 
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1 OK | 
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Figure 4.54 ; Creation d'un bouton Flash dans Dreamweaver 
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Indiquez un nom pour votre bouton dans le champ Enregistrer 
sous puis validez avec le bouton OK. Le bouton Flash est insere 
dans la page HTML. 

Le bouton s' insere automatiquement au sein votre page dans 
Dreamweaver. Vous pouvez regler ses parametres depuis la 
fenetre Proprietes en cliquant sur le bouton Modifier mais celui-ci 
reste editable uniquement au sein de Dreamweaver. 
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Figure 4.55 : La fenetre Proprietes de bouton Flash 

9 Afin de definir une barre de navigation, il suffit de creer plusieurs 
boutons et de les placer les uns a cotes des autres, verticalement 
ou horizontalement. 
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Ce modele cte Page cTaccuei eat 
I ideal pour introduire le contenu 
de votre s*e Web . Pratiquement 
I la totalite de son contenu peut 
etre personnalisee, y compris 
les images, le texte et les Bens. 
Vous pouvez choisir de conserver les graphiques proposes ou 
tes remptecer par les votres 



Figure 4.56 : Une barre de navigation en Flash 



Ajouter une animation de texte 

Analogue a la fonction de creation de bouton, Flash dispose d'une 
fonctionnalite destinee a creer rapidement, par le biais d' Assistant, un 
texte anime au format Flash : 



LE GUIDE COMPLET 



153 



Aller plus loin avec Dreamweaver 



1 Ouvrez la page dans laquelle vous souhaitez inserer le texte anime 
avec la commande Flchier/Ouvrir. 

2 Selectionnez le menu Insertions/Medias/Texte Flash. La fenetre 
Inserer le texte Flash apparait. 

3 Vous pouvez definir au sein de cette fenetre la police, la taille, la 
couleur du texte par defaut et la couleur de survol, c'est-a-dire 
lors du passage de la souris sur le texte 

4 Specifiez comme pour le bouton un lien, une cible une couleur 
d'arriere-plan analogue au fond de votre page web puis nommez 
votre texte. Validez par un clic sur le bouton OK pour enregistrer 
les modifications. 



Inserer le texte Flash 
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Figure 4.57 : Creation d'un texte anime en Flash 



Pour modifier les parametres de votre texte, selectionnez-le dans 
Dreamweaver. Cliquez sur le bouton Modifier dans la fenetre 
Proprietes. 

Afin de tester l'animation, ouvrez votre page dans un navigateur 
web avec la touche [F12| . Lors du passage de la souris sur le titre, 
celui-ci change de couleur comme il est specifie dans la fenetre 
d' insertion du texte Flash. 
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Carnet de 

Au coeur de la gastronomie fa p o n a i s e 



voyage^ 



Figure 4.58 : Titre en Flash cree avec Dreamweaver 



4.8. Utiliser les formulaires 

Les formulaires HTML sont utilises dans de nombreux sites web afin de 
recueillir des informations sur vos visiteurs. lis peuvent avoir de 
multiples usages : formulaire de candidature, livre d'or pour faire part 
de ses commentaires, etc. 



Creer un formulaire d'inscription 
a une newsletter 

1 Ouvrez votre page HTML et selectionnez la commande 
Insertion/Formulaire/Formulaire. Cette commande permet 
d' inserer les balises HTML necessaires a la structure du 
formulaire. 

2 Une ligne rouge pointillee apparait a l'ecran. C'est a l'interieur de 
cette ligne, invisible lors de la visualisation dans le navigateur, 
que les differents elements du formulaire seront places. 

3 Cliquez sur cette ligne rouge et ouvrez la fenetre Proprietes. Dans 
le champ Action, indiquez votre adresse mail, par exemple 
mailto : karine@hotmail . com. Lors d'un clic sur le bouton 
d'envoi de formulaire, les informations seront transmises a 
1' adresse mail indiquee. 



REMARQUE 



Afficher les donnees transmises par le formulaire 

Selon votre logiciel de messagerie, les informations peuvent apparaitre 
sous la forme d'un fichier presentant l'extension .txt ou .Att. Pour 
visualiser son contenu, vous devez 1'ouvrir avec un editeur de texte, par 
exemple le Bloc-notes de Windows. 
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Selectionnez la commande Insertion/Formulaire/Champ de texte. 
La fenetre Attributs d'accessibilite des balises d'entree apparait. 
Saisissez dans le champ Etiquette 1' information a entrer dans le 
champ de texte a inserer. Pour cet exemple, ecrivez NOM. 
Conservez les autres options par defaut puis validez par un clic 
sur le bouton OK. 



DEFINITION 



Champ de texte 

Un champ de texte correspond a un champ de saisie d'une seule ligne, 
utilise pour ecrire un texte court tel que nom, prenom ou adresse email 
par exemple. II se presente sous la forme d'un rectangle blanc a 
l'interieur duquel l'internaute peut saisir les informations necessaires. 



5 Cliquez sur la touche afin de passer a la ligne suivante. 
Inserez un nouveau champ de texte email. 



•Formulaire ^inscription a la Newsletter 1 


I \ 


:NOM 
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•E-MAIL 
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Figure 4.53 : 

Insertion d'un 
formulaire 



Afin d'envoyer ces donnees, il est necessaire d'ajouter un bouton 
depuis le menu Insertion/Formulaire/Bouton. Dans la fenetre 
Attributs d'accessibilite des balises d'entree, n'entrez rien dans 
le champ Etiquette et validez par un clic sur le bouton OK. 

Testez votre formulaire dans un navigateur Internet en appuyant 
sur la touche |F12] . Indiquez un nom dans le champ Nom, un email 
dans le champ Email et cliquez sur le bouton Envoyer. Les 
informations sont envoyees directement par 1' intermediate de 
votre logiciel de messagerie. 



Inserer un questionnaire simple 

Un formulaire peut contenir de multiples elements afin de realiser 
sondage, questionnaire, formulaire d' inscription, de recommandation, 
etc. Pour aller plus loin avec les formulaires, un questionnaire contenant 
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champs de texte, boutons radio, cases a cocher, listes deroulantes et 
boutons d' envoi sera cree afin de realiser un questionnaire. 

1 Creez un nouveau formulaire avec le menu 
Insertion/Formulaire/Formulaire. Afin d' aligner les champs du 
formulaire, un tableau sera cree a l'interieur du formulaire. Placez 
le curseur entre les deux lignes rouges et selectionnez la 
commande Insertion/Tableau. 

2 Creez un tableau de 5 lignes et 2 colonnes, d'une largeur de 70%, 
avec une bordure de 1. Validez par OK. 



Pour plus de details sur la creation de tableaux HTML, 
reportez-vous a la section Structurer sa mise en page avec les 
tableaux de ce chapitre. 

3 Dans la colonne de gauche, inserez les intitules nom et prenom 
dans deux lignes distinctes. 





Figure 4.60 : Insertion des libelles de formulaire 

Dans la seconde colonne du tableau, inserez un champ de texte 
face aux champs Nom et Prenom grace a la commande 
Insertion/Formulaire/Champ de texte. Inserez la question 
Comment avez-vous connu ce site ? dans la colonne de gauche. 

Dans la seconde colonne du tableau, face a la question, une liste 
deroulante comprenant plusieurs choix va etre inseree. 
Selectionnez la commande Insertion/Formulaire/Liste/Menu. 



'Comment avez-vous connu ce site ? 



I Moteurs de recherche v [!; 



;Etes vous satisfait des informations 
itrouvees ? 



!Souhaitez-vous recevoir des of fres 
ijspeciates sur : 



Figure 4.61 : Ajout d'une liste deroulante 
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N'inserez pas d'etiquette dans la fenetre Attributs d'accessibilite 
des balises d'entree qui s'affiche a 1'ecran et conservez les autres 
valeurs par defaut. Cliquez sur la liste afin de la selectionner puis 
ouvrez la fenetre Proprietes. Cliquez sur le bouton Valeurs de la 
liste.... 



Liste deroulante 

La liste deroulante est utilisee au sein d'un formulaire afin de 
selectionner uniquement une reponse parmi une liste de propositions. 



7 Dans la botte de dialogue Valeurs de la liste, indiquez dans le 
champ Etiquette de I'element le premier intitule. Cliquez sur le 
bouton + afin d'ajouter les elements suivants. Validez par OK. 



9 Valeurs de la liste 




Figure 4.62 : Insertion de valeurs dans la liste 

Dans la seconde colonne du tableau, face a la question Avez-vous 
apprecie ce site ?, selectionnez la commande 
Insertion/Formulaire/Bouton radio. Dans la fenetre Attributs 
d'accessibilite des balises d'entree, entrez Oui dans le champ 
Etiquette. Renouvelez 1' operation pour creer un deuxieme bouton 
radio avec 1' etiquette Non. 



DEFINITION 



Bouton radio 

Les boutons radio sont utilises dans le cas ou une seule reponse parmi 
plusieurs est possible. Par exemple, a la question : etes-vous majeur ? 
Une seule reponse est possible, soit Oui, soit Non. 



9 Dans la seconde colonne du tableau, face a la question Souhaitez- 
vous recevoir des offres speciales sur : selectionnez la commande 
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Insertion/Formulaire/Case a cocher. Inserez trois cases a cocher 
comme indique sur 1' illustration en specifiant leur intitule dans le 
champ Etiquette de la fenetre Attributs d'accessibilite des balises 

d'entree. Pour passer a la ligne sans creer un nouveau paragraphe, 
appuyez sur la combinaison de touches [Majl +f^]. 



DEFINITION 



Case a cocher 

Contrairement aux boutons radio, les cases a cocher sont employees 
dans les cas ou plusieurs reponses sont possibles. Par exemple, vous 
souhaitez a la fois recevoir par email les promotions en cours et 
l'actualite du site. 



lOFusionnez la derniere ligne du tableau puis selectionnez la 
commande Insertion/Formulaire/Bouton. Un bouton Envoyer 
s'affiche a 1'ecran. 



:jiMOM 



Questionnaire 



PRENOM 



;|iComment avez-vous connu ce site ? 



i:Moteurs de recherche 



* 



;:8es vous satisfait des informations 



;!trouvees ? 



iiOouiO 



Non 



|;Souhaitez-vous recevoir des offres 
■lispeciales sur : 



j: LJ Materiel informatique 
i: LJ Photo numerique 
•: LJ Voyages degriffes 



;ij Envoyer 



Figure 4.63 : Apercu du formulaire 

11 Afin de transmettre ces informations par mail, selectionnez 
1' ensemble du formulaire et indiquez une adresse mail dans le 
champ Action de la fenetre Proprietes, sans oublier de la faire 
preceder de 1' intitule mailto:. Par exemple, 

mailto : karine@hotmail . f r. 
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12 Pour visualiser le formulaire dans un navigateur Internet, appuyez 
sur la touche |F12) . Un clic sur le bouton Envoyer transmettra 
toutes les informations a l'adresse email specifiee. 



REMARQUE 



Traiter efficacement les donnees d'un formulaire 

Le traitement de donnes par email est certainement le plus simple 
mais il n'est pas le plus complet. De plus, au-dela d'une cinquantaine 
d' inscriptions par jour, la saisie de donnees risque rapidement de devenir 
ingerable. Vous pouvez faire appel a un script dedie a cette tache, 
souvent propose par votre hebergeur au format cgi ou php qui se 
chargera de traiter automatiquement les donnees du formulaire. 



4.9. Publier son site web avec I'outil 
FTP in teg re 

Apres avoir cree votre site avec Dreamweaver, vous devez le mettre en 
ligne sur votre serveur web. Dreamweaver propose un outil integre qui 
vous permet de publier facilement vos fichiers en ligne par simple 
glisser deplacer. II se charge meme de mettre automatiquement votre site 
a jour au fur et a mesure des modifications effectuees. 

Organiser les fichiers de votre site 

1 Lorsque vous etes satisfait des pages creees avec Dreamweaver, 
selectionnez la commande Site/Gerer les sites. Selectionnez le 
site Souvenirsdevoyage cree prealablement puis cliquez sur le 
bouton Termine. 



REMARQUE 



De quelles donnees avez-vous besoin ? 

Afin de publier votre site, vous devez posseder un hebergeur qui se 
chargera de vous transmettre une adresse FTP, ainsi qu'un nom et un 
mot de passe indispensables a toute connexion. 



Les documents composant votre site web apparaissent dans la 
fenetre Fichiers. En double-cliquant sur un nom de fichier, 
celui-ci s'affiche automatiquement dans Dreamweaver. 

Afin de modifier l'arborescence de votre site en ajoutant un 
nouveau dossier pour regrouper les images par exemple, cliquez 
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du bouton droit sur une image puis choisissez la commande 
Nouveau Dossier. 

Un nouveau dossier s'affiche en bas de liste. Cliquez pour le 
renommer puis glissez deplacez vers ce dossier les images de la 
votre site en maintenant le bouton de la souris enfonce. 

La boite de dialogue Mettre a jour les fichiers apparait a l'ecran. 
Dreamweaver se charge de mettre a jour vos liens 
automatiquement. Cliquez sur le bouton Mettre a jour. 



Mettre a jour les liens dans les fichiers suivants ? 




] 



Mettre a jour 



Pas mettre a jour 



Aide 



Figure 4.64 : Mise a jour automatique des liens du site web 

6 Faites de meme pour les fichiers video et les animations Flash afin 
de creer des repertoires distincts. Mettez a jour les liens pour 
eviter tout probleme de navigation par la suite. 



ATTENTION 



Evitez accents et caracteres speciaux 

Lors de la creation de nouveaux dossiers ou si vous renommez vos 
fichiers, evitez d'utiliser accents, espaces et caracteres speciaux. lis sont 
susceptibles de ne pas etre correctement reconnus par le serveur web lors 
du transfert de fichiers. 



Afin d'avoir un apercu d'ensemble des elements contenus dans 
votre site web, vous pouvez afficher le panneau Actifs avec la 
commande Fenetre/Actifs. Tous les details lies aux images (poids, 
taille, type, etc.) mais aussi aux videos, aux liens ou aux couleurs 
selectionnes sont resumes dans ce panneau. 
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Aller plus loin avec Dreamweaver 



Mettre a jour le site web 

La mise a jour du site web se deroule par 1' intermediate du panneau 
Fichiers, apres avoir prealablement cree un site dans Dreamweaver en 
indiquant tous les parametres de connexion necessaires. 

1 Afin de vous connecter a votre serveur web, cliquez sur l'icone 
note distant du panneau Fichiers. La mise a jour de votre site web 
se lance immediatement. 

2 Si un probleme de connexion survient, utilisez la commande 
Site/Gerer les sites puis cliquez sur le bouton Modifier afin de 
verifier les parametres lies a votre hebergement. Cliquez sur le 
bouton Tester la connexion pour vous assurer que tout est rentre 
dans l'ordre. 




® €3) Musique 
B l£jj Video 



U 



* 



accueil.htrnl 
article.html 
exemple.html 
mm_health_nutr.css 



Journal... 



Figure 4.65 : Connexion au serveur web 
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Pour davantage d 'informations sur la configuration de la 
connexion, reportez-vous a la section Demarrer avec 
Dreamweaver de ce chapitre. 

3 Ouvrez votre navigateur Internet puis ecrivez votre adresse web, 
du type www.monsite.com. La page d'accueil de votre site s'affiche 
a l'ecran. Elle est desormais visible pour les internautes du monde 
entier. 




Nommer sa page d'accueil 

Selon les hebergeurs, le nom de la premiere page affichee apres avoir 
ecrit 1'adresse de votre site dans un navigateur Internet peut varier. La 
plupart du temps, la premiere page d'un site correspond a la page 
accueil.htm ou index.htm. Les extensions .htm ou .html sont egalement 
generalement prises en compte de la meme maniere par la majorite des 
serveurs web mais en cas de doute, n'hesitez pas a consulter la FAQ 
(Foire aux questions) de votre hebergeur. 



Vous n'etes pas oblige, a chaque mise a jour, d'envoyer la totalite 
des fichiers de votre site. Selectionnez le(s) fichier(s) a envoyer 
vers le serveur de votre hebergeur puis cliquez du bouton droit. 
Dans le menu contextuel, activez la commande Synchroniser. Si 
la commande Synchroniser est grisee, cela signifie qu'une version 
a jour est deja en ligne sur votre serveur web. 

Pour selectionner plusieurs fichiers a synchroniser, maintenez la 
touche |Majl enfoncee tout en cliquant pour selectionner des 
fichiers contigus. Si vos fichiers ne sont pas contigus, employez la 
touche row I. 



. aW,1„ 




Le journal FTP de Dreamweaver 

Tous les transferts de fichiers FTP sont enregistres par Dreamweaver. 
En cas d'erreur lors d'un transfert, n'hesitez pas a utiliser le journal du 
site FTP susceptible de vous aider a resoudre le probleme. Le journal est 
accessible en cliquant sur le bouton Journal situe dans Tangle inferieur 
droit du panneau Fichiers, accessible depuis le menu Fenetre/Fichiers. 
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Chapitre 5 



Les ressources gratuites du Web 



Pour agrementer votre site, nul besoin d'un investissement couteux. Le 
Web propose de nombreuses ressources gratuites afin de denicher 
photos, cliparts mais aussi polices, kits graphiques ou scripts destines a 
enrichir vos creations web. 



5.1. Faire appel aux kits graphiques 
HTML 

Certains sites proposent des kits graphiques HTML "prets a l'emploi". II 
s'agit d' interfaces web incluant boutons de navigation, arriere-plans et 
logos que vous pouvez integrer tel quel ou personnaliser a partir d'un 
logiciel de retouche d' images car les sources sont egalement fournies. 

. Une excellente facon pour les webmestres en herbe qui ne possedent pas 
une ame d' artiste de disposer rapidement d'une interface graphique pour 
s'afficher sur le Web. 

Ce chapitre illustre l'utilisation d'un kit graphique issu du site 
Easycreations. II offre l'avantage de proposer des kits gratuits, a condition 
de laisser le copyright du site sur les pages publiees. 

Selectionner un kit graphique 

1 Ouvrez votre navigateur et rendez-vous a l'adresse 
www.easycreation.com. Afin d'acceder au site, votre navigateur doit 
etre equipe du Flash Player. Si vous ne le possedez pas, rendez-vous 
a l'adresse suivante : www.adobe.com. Cliquez sur le lien Entrer. 

2 Dans le menu situe a gauche, cliquez sur le lien Kits gratuits. Dans 
le menu deroulant, selectionnez HTML afin d'acceder aux kits 
graphiques realises en HTML, sans technologie Flash. 



S>" Pour dovantage d 'informations sur la technologie Flash, 
55, reportez-vous au chapitre 6, Creer des animations pour le Web 
avec Flash. 

3 Un apercu des kits gratuits proposes par le site s'affiche a l'ecran. 
Cliquez sur une vignette afin de visualiser un apercu plus detaille 
de l' interface proposee. 

4 Cliquez sur le lien Demo pour tester le kit graphique. Liens, 
menus, bannieres, couleurs s'affichent dans la page HTML. 
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5 Au-dessous de chaque kit sont indiquees les principales 
caracteristiques de ce dernier : 

— Resolution indique l'affichage pour lequel 1' interface graphique 
a ete optimisee. Une resolution de 800 * 600 signifie par 
exemple que 1' interface couvrira la totalite d'un ecran offrant 
une taille 800 pixels de large sur 600 pixels de haut. 

— HTML indique si V interface proposee inclut du code HTML. 
Certaines interfaces realisees integralement avec Flash 
necessiteront un plug-in pour etre vues, ce qui n'est pas le cas 
des sites en HTML. 

— Javascript indique si 1' interface inclut des sites Javascript. Le 
cas echeant, il vous sera peut-etre necessaire de les 
personnaliser avant de publier 1' interface mais cela reste 
facultatif. 



PHP indique si 1' interface fait appel au langage PHP. Si vous 
optez pour une interface avec PHP, votre serveur web doit 
obligatoirement supporter cette technologie. En cas de doute, 
verifiez avec votre hebergeur. 

IFrames et Frames. Les frames, egalement appelees cadres en 
fran^ais, permettent de diviser une page en plusieurs fenetres 
HTML. Choisissez de preference des interfaces sans frames ni 
iframes car les sites web utilisant cette technique sont plus 
difficiles a referencer. 




Figure 5. 1 : Une interface web proposee par le site Easycreations 
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REMARQUE 



Les kits graphiques payants 

Pour la publication de sites plus professionnels ou a vocation 
commerciale, vous trouverez sur le Web des kits graphiques de qualite a 
partir de 3 € sur le site www.freegaia.com, qui propose egalement de 
nombreux objets graphiques (boutons, barre de navigation, etc.). 

Le site www.kit-graphique-webmaster.com offre egalement plusieurs dizaines 
d' interfaces web a partir de 15 €. Vous trouverez logos et animations Flash a 
inserer sur votre site, adaptes a de nombreuses thematiques, de 1' agriculture 
a l'informatique en passant par l'immobilier ou le milieu medical. 



Installer un kit graphique sur sa page web 

1 Apres avoir choisi votre kit, cliquez sur le bouton Telecharger. 
Dans cet exemple, le premier kit situe en haut a gauche a ete 
selectionne. Le kit est propose au format ZIP, il s'agit d'un format 
compresse destine a diminuer le poids des fichiers telecharges. 






Decompresser un fichier ZIP 

Afin de dezipper votre repertoire, vous devez posseder un logiciel de 
decompression tel que Winrar, dont vous trouverez une version 
d' evaluation sur le site www.adc-soft.com/winrar.htm. 



2 La boite de dialogue de telechargement s'affiche a l'ecran. 
Cochez le bouton radio Enregistrer sur le disque puis validez par 
un clic sur le bouton OK. 



Ouverture de kit75.zip 



Vous avez choisi d'ouvrir 
§ kit75.zip 

qui est un fichier de type : Archive WinRAR ZIP 
a partir de : http://www.premiumwanadoo.corn 

Que doit faire Firefox avec ce fichier ? 



O Quvrir avec WinRAR.ZIP (defaut) 



i Enregistrer sur le disque 

□ Toujours effectuer cette action pour ce type de fichier. 



Annuler 



Figure 5.2 : 

Telechargement 
d'un kit graphique 
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3 Cliquez du bouton droit sur le repertoire zippe. Choisissez la 
commande Extraire les fichiers. Selectionnez un emplacement sur 
votre disque dur puis validez. 



I31W3 



Ouvrir 

Explorer 

Extraire les fichiers. 

Extraire Ici 



Extraire vers kjt75« 



K Rechercher d'eventuels virus 



Ouvrir avec 
E-rnail with Yahoo! 



Envoyer vers 



Couper 
Copier 



Creer un raccourci 

Supprimer 

Renommer 



Proprietes 



Figure 5.3 : 

Decompression d'un 
fichier ZIP avec Winrar 



Cliquez dans le repertoire obtenu puis ouvrez la page index.htm 
dans un editeur web tel que Dreamweaver avec la commande 
Fichier/Ouvrir afin de personnaliser 1' interface. Avant de demarrer 
toute modification, sauvegardez votre page sous un nouveau nom 
pour ne pas ecraser ce fichier, par exemple 
index_original.htm. Ouvrez de nouveau le fichier index.htm. 

En mode Creation, il ne vous reste plus qu'a selectionner le texte 
de F interface afin de le modifier selon vos besoins, en vous aidant 
de la fenetre Proprietes. 
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6 Afin de personnaliser menus et liens, il suffit egalement de 
selectionner le texte pour le mettre a jour. Lorsque vous etes 
satisfait, enregistrez la page avec la commande Fichier/ 
Enregistrer. 
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Figure 5.4 : Personnalisation du kit graphique dans Dreamweaver 

7 Transferez la page index.htm ainsi que le repertoire contenant les 
images sur votre site web a l'aide de la fenetre Fichiers. 

8 Visualisez le site nouvellement cree depuis un navigateur Internet 
en indiquant l'adresse de votre site web, du type www.monsite.com. 
Inutile d'indiquer le nom de la page d'accueil (index.htm) ; 
celle-ci est en effet reconnue par defaut par la plupart des serveurs 
web comme page d'accueil. 
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Pour davantage d 'informations sur la publication avec 
Dreamweaver, reportez-vous au chapitre 4, Alter plus loin avec 
Dreamweaver. 



5.2. Utiliser les scripts prets a I'emploi 

Les scripts Javascript ont de multiples usages : creation de pop up, 
redirection d'URL, verification de formulaires, etc. 

Javascript est un langage de programmation qui necessite un 
apprentissage regulier. Si vous souhaitez profiler des scripts developpes 
dans ce langage pour ajouter de l'interactivite a votre site sans pour 
autant passer de longues heures dans 1' apprentissage de ce langage, des 
sites proposant de nombreux scripts prets a I'emploi sont a votre 
disposition. II suffit de les copier/coller sur votre page web a l'endroit 
choisi. 



Choisir un script 

1 Ouvrez votre navigateur et rendez-vous sur le site de l'editeur 
Javascript a l'adresse www.editeurjavascript.com. Ce site reference 
plusieurs centaines de scripts classes par themes. 

2 Dans cet exemple, la date de derniere mise a jour de la page web 
sera ajoutee a la page web. Lors d'une recherche sur un script 
precis, utilisez le moteur de recherche integre a l'editeur 
Javascript afin d'acceder plus rapidement au script souhaite. 

3 Entrez les mots-cles date de mise a jour. Dans la liste 
deroulante, selectionnez l'option dans les scripts. Lancez la 
recherche en cliquant sur le bouton OK. 
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Figure 5.5 : Le site de I'editeur Javascript 

4 Quatre scripts correspondent a la recherche effectuee. Sous 
chaque titre de script est indique le nom du site sur lequel vous 
pourrez le copier. Cliquez sur le nom du script ; vous etes renvoye 
automatiquement sur la page correspondante. 
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Figure 5.G : Affichage des scripts correspondant a la recherche 
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5 Selectionnez le code du script Javascript avec la souris. Tout code 
Javascript debute par la balise <script 

type="text/javascript"> et se termine par la balise 

</script>. 

6 Apres avoir selectionne le script, cliquez du bouton droit. 
Selectionnez la commande Copier dans le menu contextuel. 



[IfSCRIPTION f T SCRIPTS 



Ce script afflche {implement la d«e (format ex : 05/08/1998) de 1% demtere modification apportee i votre page- II fait appel a la fonetio 
lastModlfied. 
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Convert* la selection en Adobe POF 
Convert* la selection en un lichiet PDF existent 
Convert* les lens selectionnes en ficbJer Adobe PDF 
Convert* les bens selectionnes en r*i bcher PDF existent 



Figure 5. 7 : Affichage des scripts correspondant a la recherche 



Integrer le script dans une page web 

1 Ouvrez la page web au sein de laquelle vous souhaitez integrer le 
script. Afin d'effectuer cette manipulation, faites appel a un 
editeur web tel que Dreamweaver. 



S ,v Pour davantage d 'informations sur la publication avec 
REN voi Dreamweaver, reportez-vous au chapitre 4, Alter plus loin avec 
Dreamweaver. 

2 Activez la commande Fichier/Ouvrir, selectionnez l'onglet 
Fractionner pour avoir un apercu simultane de votre page web et 
de son code source. 

3 Placez le curseur a l'endroit ou vous souhaitez inserer le script au 
sein de la fenetre d' apercu. 

4 Reperez l'endroit correspondant dans le code source. Cliquez du 
bouton droit et selectionnez la commande Coller. Assurez-vous en 
collant le script que les retours a la ligne sont strictement 
analogues a 1' original ; dans le cas contraire, votre script est 
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susceptible de ne pas fonctionner. Votre script doit etre analogue 
au code suivant : 

Le script copie est le suivant : 

<script type=" text/ javascript "> 

<!-- 

date = document . lastModif ied; jour = date.charAt (3) 

Sx + date.charAt (4) ; mois = date. charAt (0) + date 

x . charAt (1); annee = date.charAt (6) + date 

S< .charAt (7) + date . charAt (8) + date . charAt (9) ; 

document .write ("Derniere mise a jour : "+jour+" 

X /"+mois+"/"+annee) ; 

--> 

</script> 




Figure 5.8 : 

Insertion du script 
dans une page web 
avec Dreamweaver 



REMARQUE 



Diff erencier en-tete et corps de page 

Dans certains scripts, le code est scinde en deux parties : une partie 
destinee a l'en-tete de votre page, delimitee par les balises <head> et 
</head> et une autre partie a placer dans le corps de la page, delimitee 
par les balises <body> et </BODY>. Assurez-vous de bien respecter ces 
indications lors du copier/coller dans le code source de la page pour que 
le script soit lance correctement. 



5 Afin de tester votre page, activez la commande Fichier/Apercu 
dans le navigateur/lnternet Explorer. La date de derniere mise a 
jour s'affiche a l'ecran, par exemple : 

Derniere mise a jour : 01/10/2006 

6 Si rien ne s'affiche a l'ecran, il est possible qu' Internet Explorer 
ait bloque le lancement du script afin de proteger votre ordinateur 
contre un contenu potentiellement dangereux. Dans ce cas, 
cliquez sur le message d'erreur qui s'affiche, situe au sein d'une 
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barre de couleur jaune dans la partie superieure du navigateur puis 
cliquez dessus. 

Selectionnez la commande Autoriser le contenu bloque depuis le 
menu contextuel afin de visualiser la date de derniere mise a jour. 
Cette date sera automatiquement actualisee a chaque nouvelle 
mise a jour sur votre site. 




TutoiielsHTML 
Tutorials Javascript 
Tutorials PHP 



tTTTE-..T.T.q>l««OW.umiIU. 

_L' utilisation de ce kit web est soumise aux limitations suiva 
_il ne peut etre vendu ou propose a un tiers sans l'autorisatio 
son createur. 
J'origine de ce kit doit etre indiquee (lien, bouton...) 



Figure 5.3 : Apercu du script Javascript dans Internet Explorer 

8 Afin de publier votre page sur votre site web, utilisez la fenetre 
Fichiers de Dreamweaver. 



REMARQUE 



Des menus interactifs a copier/coller 

Inserer un menu compose d'une arborescence complexe ou 
comprenant des effets de survol sans etre un webmestre emerite, c'est le 
principe du site Dynamicdrive qui propose un large choix de menus a 
integrer dans votre site. Bien qu'en anglais, l'interface tres rapide a 
prendre en main ne demande pas une maitrise avancee de la langue. 

Apres avoir selectionne votre menu parmi les modeles disponibles au sein 
de la rubrique Menus & Navigation, copiez/collez les elements indiques dans 
le code source de votre page web afin d'obtenir une barre de navigation 
immediatement fonctionnelle. 



5.3. Telecharger des images 
sur Internet 

Photos, illustrations, cliparts, gifs animes, comment trouver son bonheur 
sur le Web ? Afin de vous aider dans vos recherches, certains moteurs 
tels que Google ont integre une fonction dediee specifiquement a la 
recherche d' images. 
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Vous entrez un mot-cle, vous cliquez, et une liste correspondant aux 
criteres entres s'affiche a l'ecran mais ces photos restent soumises aux 
droits d'auteur. 

Du cliche professionnel issu des plus grandes banques d' images 
mondiales au particulier qui propose ses photos libres de droits en 
passant par les moteurs specialises dans la recherche d' images, il n'est 
pas toujours simple de s'y retrouver. 



Les banques d'images 

Sur le site Barry's free photos, un tres grand nombre de photos libres de 
droit classees par themes sont a votre disposition : animaux, voyages, 
aviation, etc. Neanmoins, la taille de 1' image est limitee a 480 pixels de 
large. 

Procedez ainsi : 

1 Ouvrez votre navigateur Internet et rendez-vous a l'adresse 
www.barrysfreephotos.com. Dans la colonne de gauche traduite en 
francais, selectionnez un theme ou cliquez sur le lien more (plus) 
arm d'afficher la bibliotheque d'images proposee par le site. 



Barry's free photos 

! T. ¥ 




Figure 5. 10 : Des photos a telecharger gratuitement sur le site 
Barrysfreephotos 

2 La liste des photos disponibles sur le theme selectionne s'affiche a 
l'ecran (plus d'une centaine). Cliquez sur une rubrique, par 
exemple San Francisco qui apparait au sein du theme Voyages. 
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Une soixantaine d'images consacrees a cette ville apparaissent 
sous forme de vignettes au sein du navigateur. 

Cliquez sur une vignette afin de visualiser la photo en taille reelle. 
Les informations de taille et de poids de 1' image s'affichent. 
Toutes les photos ne sont pas de qualite egale, une petite selection 
est done indispensable. 

Si cette image vous convient et que vous souhaitiez l'enregistrer 
sur votre ordinateur, cliquez du bouton droit dessus puis 
selectionnez la commande Enregistrer I'image sous. 



Barry's free photos 




Figure 5.11 : Enregistrement d'une image 

Dans la boite de dialogue Enregistrer I'image. selectionnez un 
emplacement sur votre ordinateur puis cliquez sur le bouton 
Enregistrer. Vous pouvez maintenant inserer cette image dans une 
page web a l'aide d'un editeur web. 



RENVOI 



Pour davantage d' informations sur Vinsertion d'images dans 
une page web, reportez-vous au chapitre 3, Creer gratuitement 
son premier site web et au chapitre 4, Alter plus loin avec 
Dreamweaver. 



REMARQUE 



Libre de droits 

Contrairement a ce que Ton pourrait penser, le terme "libre de droits" 
n'entraine pas l'abolition de toute regie. II est en effet necessaire de 
respecter quelques regies d' utilisation. Acheter une photo libre de droits 
consiste a acheter une licence d' utilisation de I'image ; ainsi il est 
generalement obligatoire a chaque publication de la photo de mentionner 
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les credits : nom de l'agence et/ou du photographe, notamment. 
Avant toute publication d'une image sur Internet, consultez 
attentivement les conditions d' utilisation. 



Les outils dedies la recherche d'images 

Pour vous aider dans la recherche de vos images sur Internet, le site 
Gograph propose une banque d'images riches et variees destinee a un 
usage personnel pour agrementer notamment vos sites web a vocation 
non commerciale. Le site inclut des photos mais aussi des illustrations 
animees ou non. 



Procedez ainsi 
1 



Ouvrez votre navigateur et entrez sur le site http://fr.gograph.com/. 
Gograph possede de nombreux formats d'images et un outil de 
recherche interne permet de determiner le type d'images a 
selectionner (gif anime, photos, icones ou clipart) en fonction du 
theme choisi. 



REMARQUE 



Conditions d'utilisation des images proposees par Gograph 

Les images proposees par Gograph sont pour la plupart libres de droit 
pour un usage personnel et non commercial. Si vous souhaitez illustrer 
votre site perso ou le CD-ROM de vos vacances, aucun souci. Par 
contre, pour toute autre activite commerciale, vous devrez commander la 
licence d'utilisation, propre a chaque visuel, generalement inferieure a 
une dizaine d' euros par image. 



Le fonctionnement de Gograph est analogue a n'importe quel autre 
outil de recherche. Dans la section FAITES VOTRE RECHERCHE 
GRAPHIQUE, un champ de texte vous permet d'indiquer les 
mots-cles caracteristiques du graphique a visualiser. 

Entrez par exemple le mot desert . Cochez la case Tous afin 
d'afficher tous les types de graphique supported par Gograph puis 
cliquez sur le bouton RECHERCHE. 
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Figure 5. 12 : Recherche d'images avec Gograph 

4 Apres validation des mots-cles, les resultats apparaissent a l'ecran 
sous forme de vignette. Pour visualiser l' image en taille reelle, 
cliquez sur sa vignette. 
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Figure 5. 13 : 

Affichage des 
resultats 
dans 
Gograph 

5 Une nouvelle fenetre apparatt pour telecharger l' image. Cliquez 
du bouton droit et selectionnez la commande Enregistrer I'image 
sous . Vous pouvez inserer I'image au sein de votre page web. 



REMARQUE 



Envoyer des cartes postales virtuelles 

Envoyer des photos des quatre coins de la planete a vos amis sans 
bouger de chez vous, rien de plus simple avec Internet. Sur le site 
http://photos.linternaute.com, vous trouverez 20 000 cliches du monde 
entier, classes par pays ou par themes. Vous pouvez utiliser ces photos a 
des fins personnelles, a condition de conserver le copyright, mais une 
fonctionnalite de carte postale virtuelle permet egalement d'expedier ces 
cliches aux personnes de votre choix. 
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Apres avoir selectionne la photo a envoyer au sein de la galerie 
web, il ne vous reste plus qu'a indiquer votre message et votre 
adresse mail. U expedition peut etre immediate, ou programmed a la 
date et l'heure de votre convenance. 



Google, le moteur polyvalent 

En plus de ses fonctionnalites classiques avec une recherche de sites par 
mots-cles, Google propose sur le meme principe une recherche 
d'images. Vous entrez un mot-cle, et une liste d'images correspondantes 
apparait automatiquement a l'ecran. 

Selon le mot-cle entre, la recherche est plus ou moins pertinente, mais 
cela vous permet tres rapidement de visualiser une multitude d'images a 
votre disposition sur un theme donne. Neanmoins, avant d'utiliser une 
de ces images sur votre site web, consultez les conditions d' utilisation. 

Pour cela : 

1 Ouvrez votre navigateur Internet et entrez 1' adresse www.g00gle.fr. 
Cliquez sur le lien Images situe juste au-dessus du champ de 
recherche arm d'effectuer une recherche d'images. 

2 Indiquez un theme relatif a 1' image cherchee au sein du champ de 
texte, par exemple Paris, Champs Elysees puis cliquez sur le 
bouton Recherche d'images. N'hesitez pas a etre precis et a 
indiquer plusieurs mots-cles ; les "robots" de Google sont 
capables d'effectuer une recherche parmi plus de 250 millions 
d'images recensees sur le Web. 



Google 



Recherche d'imagesj 



Web linages Groupes Aclualites plus >■ 
Paris Chomps Elysees 



Reche,che p-imageF] ^J^ 1 *' 



'MW- Ml 

La solution de recherche d'images la plus complete du Web 

Publicile ■ Solutions d'entieprise - A piopos de Google 

92006 Google 



Figure 5. 14 : Acces au moteur de recherche Images de Google 
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3 Les pages de resultats s'affichent sous forme de vignettes. Le titre 
de l'image, sa taille en pixels, son poids et le format de fichier, 
generalement JPEG ou GIF sont specifies sous chaque image. 



Pour plus d' informations sur les formats d'images utilises pour 
le Web, reportez-vous au chapitre 8, Optimiser ses images pour 
le Web. 

4 Si vous souhaitez afficher uniquement des images en petit ou 
grand format, la liste deroulante Afficher situee dans le champ 
superieur gauche vous permet de filtrer les resultats selon trois 
criteres de taille. 




C<H«HXI.>l>C..>Ogltfr 



Figure 5. 15 : Affichage des resultats dans Google Images 

Pour passer d'une page a I 'autre, descendez au bas de la page et 
cliquez sur le numero de page ou sur le lien Suivant. 

Afin d'agrandir une image, cliquez sur sa vignette. En haut de 
l'ecran s'affiche une reproduction de la photo et en bas, la page 
web dans laquelle elle a ete trouvee. Si vous souhaitez employer 
cette image, verifiez les conditions d' utilisation specifiees sur le 
site d'origine ou contactez directement le webmestre par email. 
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Figure 5. 16 : Apercu de I'image selectionnee dans le site web 
d'origine 



REMARQUE 



Le mode de recherche avarice 

Pour une recherche plus precise, un mode avance est disponible. 
Cliquez sur le lien Images - Recherche avancee situe sur la page de 
recherche d' images de Google. Ce mode vous permet notamment de 
selectionner le format a afficher (JPEG, GIF ou PNG), la taille des 
vignettes, mais aussi d'effectuer un tri entre les images en noir et blanc 
ou en couleur. 



5.4. Installer de nouvelles polices 
de caractere 

Afin de realiser des creations graphiques inedites, une police originale 
vous deviendra rapidement indispensable. Pour telecharger gratuitement 
des polices, rendez-vous sur le site Font Foundry qui propose des polices 
gratuites et pay antes pour Mac et PC. 
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Police 



Une police regroupe un assortiment de caracteres et symboles 
typographiques de styles similaires. Parmi les polices les plus 
couramment utilisees sur un ordinateur, on trouve le Times, l'Arial, 
1' Helvetica, etc. 



1 Ouvrez un navigateur Internet et indiquez l'adresse du site 
Fontfoundry, www.fontfoundry.com. II s'agit d'un site en anglais mais 
tres simple d' utilisation qui ne demande pas de connaissances 
avancees dans la langue de Shakespeare. 

2 Sur la page d'accueil, cliquez sur le lien Fonts A-Z. Les polices 
sont classees par ordre alphabetique. Le nom de la police, ses 
conditions d' utilisation (Freeware = gratuit ou Shareware = 
payant) ainsi qu'une vignette d' apercu sont disponibles pour 
chaque police (voir Figure 5.17). 

3 Afin de telecharger une police, cliquez sur sa vignette. Sa fiche 
d'information s'affiche a l'ecran. Pour mieux visualiser le type de 
caracteres de la police choisie, entrez n'importe quel mot au sein 
du champ de texte de la section Sample Text (texte d'exemple) 
puis cliquez sur le bouton Generate Text (generer le texte). Le 
texte saisi s'affiche avec la police selectionnee. 

4 Afin d'enregistrer immediatement cette police sur votre 
ordinateur, cliquez sur lien situe dans la section Download. Selon 
la police choisie, celle-ci peut etre compatible Mac, PC ou Mac et 
PC selon le signe indique devant le lien (voir Figure 5.18). 

5 Si vous souhaitez telecharger plusieurs polices issues du site 
Fontfoundry, cliquez sur le lien Add to basket (Ajouter au panier). 
Vous pouvez egalement choisir de recevoir la police par email en 
indiquant votre adresse dans la section Email me the font. 

6 La police telechargee a ete compressee au format ZIP. 
Decompressez-la a l'aide d'un utilitaire tel que WinZip 
(www.winzip.com). 
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Figure 5.17 : Polices a telecharger sur le site Fontfoundry 

7 Cliquez sur le menu Demarrer puis selectionnez 
Parametres/Panneau de configuration. Double-cliquez sur 
l'icone Polices. La fenetre Polices s'affiche a l'ecran (voir 
Figure 5. 19). 
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Figure 5. 18 : Telechargement d'une police Windows 
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Figure 5. 19 : Telechargement d'une police Windows 
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Selectionnez la commande Fichier/lnstaller une nouvelle police. 
La fenetre Ajout de polices apparait. Dans l'explorateur de 
dossiers, choisissez le repertoire de la police telechargee. Son 
nom s'affiche automatiquement dans la zone de texte Liste des 
polices. Cliquez sur le bouton OK. 



Ajout de polices 



Liste des polices : 



Blacl-Adderll iTrueTvoe 



OK 



Fermer 



Selectionner tout 



Dossiers : 

n:\b01 8-blackadderii 



Lecteurs : 




n: Documents 



Reseau. 



Copier les polices dans le dossier des polices 



Figure 5.20 : Installation de la police sur I'ordinateur 



A 



ATTENTION 



Ne decompressez pas le repertoire contenant la police sur le Bureau 

Si le repertoire de votre police se situe sur le Bureau Windows, elle 
ne sera pas detectee dans la fenetre Ajout de polices. 



a 



ATTENTION 



La nouvelle police s'affiche a cote des autres fichiers de police de 
la fenetre Polices. Arm de la tester, ouvrez une application 
utilisant du texte (un traitement de texte, un logiciel de retouche 
d'images, un editeur web, etc.). Votre nouvelle police est 
accessible dans la liste des polices de 1' application. 



Definir plusieurs polices dans une page web 

Afin que le site web reste accessible au plus grand nombre, il est 
conseille de toujours specifier deux ou trois polices pour le texte lors de 
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la creation de la page web. Si la premiere police choisie par le 
webmestre n'est pas reconnue par le navigateur de l'internaute, les 
deux autres types de police constitueront une alternative. 



5.5. Inserer un forum 

Le forum permet aux visiteurs de votre site d'echanger leurs points de 
vue sur votre site ou des themes que vous aurez definis en tant que 
webmestre. La creation d'un forum de A a Z demande de solides 
connaissances en informatique mais il existe des forums "cles en main" 
qu'il suffit de personnaliser en fonction de ses besoins. 

Cette etape consiste a installer le forum phpBB, un forum tres 
performant, entierement personnalisable, en francais et gratuit bien sur. 

Afin de l'utiliser sur votre site web, votre hebergeur doit supporter le 
langage PHP et posseder une base de donnees MYSQL. Avant de lancer 
1' installation du forum, collectez les identifiants et mots de passe 
necessaires fournis par votre hebergeur. 

II est indispensable d'avoir acces directement au serveur web pour 
installer le forum phpBB. Aussi, il vous sera impossible d' installer ce 
type de forum sur un blog cree a partir d'une plateforme d'hebergement, 
par exemple. 



RENVOI 



Pour davantage d Informations sur le choix d'un hebergement, 
reportez-vous au chapitre 10, Publier et promouvoir son site 
web. 



Telecharger phpBB sur son ordinateur 

1 Ouvrez votre navigateur Internet afin d'acceder au site de phpBB 
a l'adresse WWW.phpbb-fr.com. Cliquez sur le lien Telecharger 
phpBB situe dans le menu a gauche. 

2 Afin de telecharger la derniere version en francais au format ZIP, 
cliquez sur le lien phpBB - Pack frangais accessible au sein de la 
fiche d' informations. Decompressez 1' archive sur votre 
ordinateur. 
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Figure 5.21 : 

Le site phpBB-fr 
propose un forum 
gratuit 



REMARQUE 



Decompression d'un f ichier ZIP 

Afin de decompresser un fichier ZIP, faites appel a un logiciel dedie 
tel que Winrar, dont vous trouverez une version d' evaluation a l'adresse 
www.adc-soft.com/wi nrar.htm . 



3 Apres decompression du repertoire, le dossier du forum se 
nomme phpBB2. Toutes les etapes de configuration vont se 
derouler en ligne grace a des formulaires. 

4 Transferez ce repertoire sur votre serveur web au sein du 
repertoire principal, generalement appele WWW. 
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Figure 5.22 : 

Transfert du 
repertoire sur un 
serveur web 
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RENVOI 



Pour davantage a" information sur le transfert par FTP, 
reportez-vous au chapitre 10, Publier et promouvoir son site 
web. 



Configurer phpBB pas a pas 

1 L' installation et la configuration se deroulent a l'adresse www 
.monsite.com/phpBB2 ; la section "monsite.com" est evidemment a 
remplacer par l'adresse de votre site web. Respectez les 
majuscules/minuscules en ecrivant l'adresse web afin de ne pas 
generer de messages d'erreur. 

2 La premiere section est nommee Configuration de base. Conservez 
les options specifiers par defaut, compatibles avec la majorite des 
sites web, soit le francais (French) en langue par defaut, une 
compatibility MYSQL versions 3 et superieures, et une Installation 
du forum. 

3 Dans la section Configuration de la base de donnees, entrez le nom 
de votre serveur MYSQL, c'est-a-dire localhost (si vous travaillez 
sur votre ordinateur en local) ou du type sql.monsite.com si vous 
faites appel a une hebergeur externe. 

4 Le nom de votre base de donnees correspond sou vent a l'adresse 
de votre site, du type monsite.com. Indiquez un nom d'utilisateur et 
un mot de passe. Toutes ces informations vous sont 
communiquees par votre hebergeur. Conservez le prefixe de base 
de donnees par defaut. 

5 Dans la section Configuration du compte administrateur, indiquez 
un nom d'utilisateur et le mot de passe necessaire pour vous 
identifier dans la zone d' administration de votre site. Apres avoir 
entre toutes les informations, cliquez sur le bouton Demarrer 
I'installation (voir Figure 5.23). 

6 Si I'installation s'est deroulee avec succes, un message de 
bienvenue apparait a l'ecran. Cliquez sur le bouton Finir 
I'installation. 



v& 



REMARQUE 



Message d'erreur "Can't connect to database" 

Si vous rencontrez cette erreur lors de I'installation de phpBB sur 
votre site, verifiez vos informations de configuration, c'est-a-dire le nom 
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de la base de donnees ainsi que les identifiants et mot de passe 
entres. N'hesitez pas a envoyer un mail au service technique de votre 
hebergeur si le probleme persiste. 
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Figure 5.23 : 

Configuration 
du forum 



Identification et acces a i'interface 
d'administration 

1 Afin d'achever le processus d' installation, un message vous 
indique qu'il est necessaire de supprimer deux repertoires 
d' installation. 

2 Ces repertoires doivent etre effaces de votre serveur web pour des 
raisons de securite. II s'agit des dossiers install et contrib. 
Connectez-vous a votre serveur web. Cliquez sur le repertoire 
phpBB2. 



Selectionnez le repertoire install et appuyez sur la touche ISuppij . 
Reproduisez cette manipulation pour 1' autre repertoire. 

Actualiser la page web. Si vous utilisez Internet Explorer, 
appuyez sur la touche (F5). La page d' identification apparait a 
l'ecran. 






& 



REMARQUE 



Revenir a la page d'identif ication 

Pour acceder par la suite a la page d' identification de votre forum, 
ecrivez l'adresse www.monsite.com/admin au sein de votre navigateur 
Internet. 
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Indiquez votre nom d'utilisateur et votre mot de passe 
administrateur afin de poursuivre le parametrage du forum puis 
cliquez sur le bouton Connexion. L' interface d'administration 
s'affiche a l'ecran. 
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Figure 5.24 : La page d'identification de phpBB 



Definir la structure du forum 

1 Au sein de I'interface d'administration, cliquez sur le lien Gestion 
dans la section Administration des forums. Par defaut, un forum de 
test a deja ete cree. Afin de le personnaliser, cliquez sur le lien 
Editer situe sur la meme ligne que Categorie de tests. 

2 Supprimez l'ancien titre et remplacez-le par le titre de votre 
choix, par exemple Vos Suggestions. Cliquez sur le bouton 
Mettre a jour afin de voir immediatement le resultat. 

3 Un message de confirmation apparait pour vous informer que la 
mise a jour s'est deroulee avec succes. Revenez a 1' administration 
des forums afin de creer un forum dans cette categorie. 

4 La mise a jour de categorie apparait a l'ecran. Sur la ligne Forum 
de tests 1, cliquez sur le lien Editer. 

5 Dans le champ Nom du forum, donnez-lui un titre. Indiquez une 
description de quelques lignes pour decrire l'objectif de votre 
forum. Dans la liste deroulante Categorie, la rubrique Vos 
suggestions est automatiquement selectionnee puisqu'une seule 
rubrique a ete creee pour le moment. 

6 Dans la liste deroulante Statut du forum, conservez 1' option 
Deverrouille afin que tout le monde puisse acceder a votre forum. 
Si vous optez pour r option Verrouille, seuls les utilisateurs 
enregistres du forum pourront consulter le forum. 
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Conservez egalement 1' option d'auto delestage en cochant la case 
Active. Cette option permet de supprimer automatiquement les 
messages peu lus qui finiront par encombrer le forum. Par defaut, 
les messages sans reponse depuis 7 jours sont retires et 
l'actualisation est quotidienne. 




Editer un forum 
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Figure 5.25 : Edition d'un forum 

Afin d'enregistrer les modifications, validez par un clic sur le 
bouton Mettre a jour. Un message de confirmation indique que la 
mise a jour s'est deroulee avec succes. Revenez a 1' administration 
des forums pour visualiser votre nouveau forum. 



Administration des forums 
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Figure 5.26 : Organisation des forums 

9 En cliquant sur les boutons Creer un nouveau forum ou Creer une 
nouvelle categorie, vous pouvez creer autant de categories et de 
forums que necessaire au sein de phpBB. 

10 Afin de visualiser votre forum en ligne, cliquez sur le lien Aperqu 
du forum dans la section Administration. 

11 Le titre du forum et sa description n'ont pas encore ete 
personnalises. Dans la section Administration generate, cliquez sur 
le lien Configuration. 

12Toutes les informations generales liees a votre forum sont 
recapitulees dans le formulaire qui apparait a l'ecran. Dans la 
section Options generates du Forum, modifiez les zones Nom du site 
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et Description du site afin de les adapter a votre site. Conservez les 
autres options par defaut. 




Figure 5.27 : Options generales du forum 



REMARQUE 



En savoir plus sur la configuration du forum 

Pour davantage d' informations sur les autres parametres de 
configuration, referez-vous a la documentation disponible sur le site 
officiel en francais de phpBB a l'adresse www.phpbb-fr.com en cliquant sur 
le lien Documentation situe dans le menu a gauche. 



Personnaliser 1'interface graphique du forum 

Les couleurs par defaut de phpBB sont le bleu et le gris mais tous les 
parametres graphiques sont entierement personnalisables par le biais de 
1' interface d'administration. 

Pour ce faire : 

1 Cliquez sur le lien Gestion dans la section Administration des 
themes. Par defaut, le theme utilise se nomme subSilver. Pour le 
modifier, cliquez sur le lien Editer. 
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REMARQUE 



Creer un nouveau theme 

Afin de conserver le modele par defaut et creer un theme graphique 
personnalise, cliquez sur le lien Creer dans la section Administration des 
themes de 1' interface d' administration. 



2 Tous les codes couleur sont indiques en mode Hexadecimal. 
Chaque element de 1' interface graphique est done facilement 
personnalisable en modifiant manuellement le code couleur. 
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Figure 5.28 : Edition d'un theme graphique 



ASTUCE 



Couleurs et code hexadecimal 

Afin de connaitre le code hexadecimal d'une couleur, rendez-vous a 
l'adresse http://l2cdepot.com/couleur.hexadecimal.html. Ce site affiche 
2 1 6 couleurs primaires et le code hexadecimal correspondant a chaque 
couleur. (voir Figure 5.29) 



3 Apres avoir modifie les codes couleur de votre choix, cliquez sur 
le bouton Sauver les parametres. Afin de visualiser les 
modifications, cliquez sur le lien Apergu du forum dans la section 
Administration. 
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Figure 5.2S : Le code hexadecimal de 216 couleurs 



REMARQUE 



Consultez la documentation de phpBB 

SI yous souhaitez aller encore plus loin dans la personnalisation afin 
de modifier le bandeau situe en haut de votre forum, ouvrez les pages 
php de votre forum a l'aide d'un editeur tel que Dreamweaver afin 
d'effectuer la modification manuellement. 



Gerer les utilisateurs du forum 

Lors de la mise en ligne d'un forum sur un site web, il est indispensable 
de le "moderer" afin d'eviter les messages indesirables ou a caractere 
publicitaire. 

1 Afin de gerer les utilisateurs de votre site, rendez-vous dans la 
section Administration des utilisateurs. Plusieurs options sont 
disponibles afin d'interdire l'acces du forum a un utilisateur qui 
posterait des messages que vous estimez par exemple non 
conformes a 1' esprit du site. 
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2 Cliquez sur le lien Controle du bannissement. Un utilisateur peut 
etre banni a partir de son nom d' utilisateur, a partir de son adresse 
IP ou de son adresse mail. Tous les criteres ne sont pas 
obligatoires. Entrez l'identifiant. Pour valider les informations 
entrees, cliquez sur le bouton Envoyer. 



DEFINITION 



Controle du Bannissement 



annissements des utrfisateurs. Vous pouve* accomptir celo en bannissant soit un utilisateur speafique, soit un intervene d'adresses IP ou 
Cos methodes empetheront un utilisateur d'attemdre voire forum. Pour empfcner un utilisateur de s'enregisirer sous un nom duolisetour different, youl pouvei ooalem 
adresse e-mail specsfique. Veuilie: noler que bannir umquemerrt fadresse e-mail n'empeoheri 
de* deu* methodes citees ci-dessus. 
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Figure 5.30 : Gestion des utilisateurs 



Adresse IP 

Chaque ordinateur connecte a Internet est identifie par 1' intermediate 
d'une adresse IP (Internet Protocol) de la forme 188.50.6.890 lors d'une 
connexion Internet. 



Afin d'acceder aux informations entrees par les utilisateurs, 
cliquez sur le lien Gestion dans la section Administration des 
utilisateurs. Entrez l'identifiant de l'utilisateur a gerer. 

Vous accedez au profil de l'utilisateur. Vous pouvez definir les 
options a afficher ou a effacer. Cliquez sur le bouton Envoyer pour 
enregistrer les modifications. 



196 LE GUIDE COMPLET 



Inserer un forum 



Chapitre 5 



Poster un message dans le forum 

1 Apres avoir acheve le parametrage du forum, cliquez sur le lien 
Apergu du forum au sein de la section Administration. Cliquez sur 
le titre du forum puis sur le bouton Nouveau. 

2 Indiquez le sujet de votre message et ecrivez votre texte. En 
cliquant sur un smiley, celui-ci s'insere automatiquement a 
l'endroit specifie. Cliquez sur le bouton Previsualisation afin 
d' avoir un apercu du message. 



Apprenez a creer votre site Web 
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Figure 5.31 : Poster un nouveau message 

Votre message apparait a l'ecran. Si vous etes satisfait, cliquez sur 
le bouton Envoyer situe en bas de page. Retournez a votre forum ; 
votre message est en ligne et peut etre lu par tous. 

Maintenant que votre forum est pret, inserez un lien depuis votre 
site web. Par defaut, il est du type : www.monsite.com/phpBB2/. 
Remplacez monsite.com par V adresse de votre site web. 




Pour davantage d 'informations sur la creation de liens, 
reportez-vous au chapitre 4, Alter plus loin avec Dreamweaver. 
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5.6. Inserer un compteur sur son site 
web 

Un compteur de visites permet de comptabiliser les visiteurs de votre 
site. Sur le site Compteur, plusieurs dizaines de modeles sont proposes 
gratuitement arm de comptabiliser les visiteurs qui sont passes sur votre 
site. 

Vous etes tier de votre site web et souhaitez visualiser le nombre de 
visiteurs quotidiens. Si votre hebergeur ne dispose pas d'un outil de 
statistique fiable, vous pouvez placer gratuitement sur votre page un 
compteur assorti a 1' interface de votre site web, a choisir parmi plusieurs 
centaines de modeles au sein du site Mon compteur (www.moncompteur 
.com). 

Apres avoir selectionne votre modele, il suffit de copier coller le code 
genere par le site dans votre page web. 



S'inscrire sur le site 

1 Ouvrez votre navigateur Internet et entrez l'adresse 
www.moncompteur.com. Dans le menu situe a gauche de la page, 
dans la section LES SERVICES, cliquez sur le lien Compteur 
classique. 
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Figure 5.32 : 

Le site 
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La page de presentation de services s'affiche a Fecran. Vous 
pouvez opter pour des compteurs classiques ou plus originaux 
avec diverses images. Arm d' installer ces compteurs sur votre site, 
vous devez vous enregistrer sur le site. Cliquez sur le bouton 
Inscription. 

Remplissez le formulaire d' inscription en indiquant un nom 
d'utilisateur, un mot de passe, l'adresse de votre site, sa categorie 
a selectionner au sein d'une liste deroulante arm d'etre reference 
dans l'annuaire du site. Specifiez egalement une adresse email 
valide puis cliquez sur le bouton Suivant afin de passer a la 
deuxieme etape. 

Indiquez votre nom, votre prenom et selectionnez dans les listes 
deroulantes Pays et Region votre localisation geographique. 
Entrez egalement votre profession et votre tranche d'age puis 
cliquez sur le bouton Suivant. 

Afin de finaliser 1' inscription, entrez le mot de passe choisi dans 
F etape precedente puis copiez/collez le numero de membre qui 
vous a ete envoye par email. Cliquez sur le bouton Valider. 



REMARQUE 



Un site web, une inscription 

Si vous gerez plusieurs sites web sur lesquels vous souhaitez inserer 
un compteur, vous devrez alors creer a chaque fois un nouveau compte. 



Inserer un compteur de visite 

1 L' inscription vous permet d' avoir acces a tous les services du site. 
Cliquez sur le lien Compteurs classiques. 



Bienvenue dans votre zone d'administration des services MonCompteur.com. 

Merci de cliquer sur le service que vous souhaitez crier ou administrer. 



SERVICES MONCOMPTEUR.COM 



Compteurs classiques 



Goodies (date et Saint du iour) 



Compteurs live 
Sondaoes 



Compteurs de clicks 



Figure 5.33 : Une seule inscription est necessaire pour bene f icier de 
tous les services du site 
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2 Cliquez sur le lien correspondant au type de compteur choisi ; 
dans cet exemple, Compteurs classiques. Pour le moment, aucun 
compteur n'est actif sur votre compte. Cliquez sur le lien Creer un 
nouveau compteur. 

3 Un message s'affiche a l'ecran afin de vous informer de la 
redirection automatique vers la galerie de compteur. Validez par 
un clic sur le bouton OK afin de confirmer la redirection. 

4 Les compteurs sont classes par categories. Selectionnez dans la 
liste la categorie correspondant au style de votre site. Dans cet 
exemple, la categorie Artistique est selectionnee. 





I GALERIE DES COMPTEURS DE VISITES 1 


• Aliment 




• Animal 




• Artistique 




• Charme 




• Digital 








• Effet 




• Evenement 


• Les compteurs de MonCompteur.com sont classes par 


• Habitant et pays 


categorie. Ainsi, en 2 dies vous allez pouvoir selectionner le 


• Habitat 

• Kilometrique 


compteur ideial pour vous :) 






• Matiere 


Cliquez sur une des categories afin de visualiser les differents types 


• Metier 


de compteurs. 


• Nature 




• Neons 




• Non-arabique 




• Objet 




• Personnage 




• Simple 




• Sport 




• Symbole 




• Tableau de scores 




• Vehicule 







• 

Figure 5.34 : 25 categories de compteur sont proposees 
gratuitement 

Une page composee de plus d'une centaine de compteurs aux 
styles graphiques tres differents s'affiche a l'ecran. Selectionnez 
le compteur de votre choix en cliquant dessus. 

La section ADMINISTRATION DES COMPTEURS permet de 
personnaliser votre compteur : 

— Code du compteur. Chaque compteur possede un code distinct. 
Le code affiche correspond au style graphique choisi. En 
selectionnant un autre code dans cette liste deroulante, vous 
selectionnez un autre compteur dont 1' apercu s'affiche 
automatiquement. 

— Compteur de visiteurs /d'affichages. Le compteur d' affiche 
comptabilise tous les acces a la page, sans restriction tandis 
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que le compteur de visiteurs comptabilise le nombre de 
visiteurs ayant vu votre site une fois dans une periode de 
24 heures. Cette derniere methode, plus fiable, est conseillee. 

— Bordure. Cochez ou decochez la case afin d'afficher ou de 
desactiver la bordure. Un apercu avec et sans bordure 
s'actualise automatiquement dans la colonne de droite selon le 
choix effectue. 

— Couleur de fond. Selon le style de compteur selectionne, vous 
pouvez ajuster la couleur de fond pour un fondu parfait dans 
votre page web. 

— Nombre de digits. II correspond au nombre de chiffres affiches 
sur le compteur. Si vous etes optimiste et pensez recevoir 
plusieurs milliers de visites par jour, vous pouvez ajouter un 
digit supplemental (au nombre de 4 par defaut). 

— Valeur du compteur. Par defaut, la valeur de demarrage est de 1, 
mais vous pouvez artificiellement augmenter cette valeur de 
depart si vous le souhaitez. 

— Compteur visible. Si vous laissez cette case cochee, le compteur 
s'affiche dans votre page. Si vous la decochez, seul le logo du 
site Moncompteur sera vu sur la page afin que vous seul puissiez 
connaitre le nombre de visites de votre site. 

7 Apres avoir personnalise toutes les options, validez en cliquant 
sur le lien Maintenant je souhaite obtenir le code Javascript de mon 
compteur. 



ADMINISTRATION Dfcb COMIMEURS 



Configuration du compteur 1 
Code du compteur : ; 1 20 v ; Parcourir... -V 

Compteur de : ff visiteurs <~ d'affichages 4^ 



Bordure : W Oui 

Couleur de fond : Non modifiable 
Nombre de digits : [ 



O Apercu 



Valider 



0001 



Valeur du compteur : h_ 



VaSder 



V 

V 

Compteur visible : I? Oui ty 

Maintenant ie souhaite obtenir le code JavaScript de mon compteur 

QRetourner | la liste de rpes compteurs 
*fm - Fond Modifiable : La couleur de fond de ce compteur est modifiable 



Figure 5.35 : Personnalisation du compteur 
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8 La code Javascript necessaire a l'affichage de votre compteur 
s'affiche. Cliquez sur le bouton Selection ner le code. Cliquez du 
bouton droit dans la zone de texte. Dans le menu contextuel, 
choisissez 1' option Copier. Le code selectionne est semblable au 
script suivant : 

<script type="text/ javascripf'x! -- 

member = 33319; 

numCounter = 1 ; 

border = 1; 

II— > 

</script> 

<script type="text/javascript" src="http: //www 

£< .moncompteur . com/ javascripts/moncompteur . js"> 

</script> 

<!-- FIN CODE M0NC0MPTEUR.COM — > 

Le numero de membre indique dans la deuxieme ligne du script va 
permettre de vous identifier afin d'afficher le compteur que vous aurez 
selectionne. 

9 Ouvrez votre page web, generalement la page d'accueil du site, 
dans un editeur tel que Dreamweaver avec la commande 
Fichier/Ouvrir. Activez le mode Fractionner, placez votre curseur 
a l'endroit ou vous souhaitez inserer le compteur puis dans le 
code source de la page, cliquez du bouton droit et selectionnez la 
commande Coller. 

1011 est normal que le compteur n'apparaisse pas dans 
Dreamweaver, celui-ci ne sera visible qu'au sein du navigateur 
Internet. Ce compteur peut aussi bien se placer dans un site web 
classique qu'au sein d'un blog a condition de pouvoir editer du 
code HTML. 
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Figure 5.36 : 

Insertion du code 
dans une page web 
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11 Transferez la page web contenant le script sur votre site web. En 
vous rendant sur votre site pour la premiere fois, le compteur 
s'incrementera de 1. Si vous avez opte pour le compteur de 
visites, celui-ci ne s'incrementera de nouveau que 24 heures plus 
tard si vous accedez depuis le meme ordinateur a votre page web, 
afin d'eviter une augmentation artificielle du nombre de visiteurs. 

Connaitre le nombre de connexions 

simultanees 

Plus original, le site Moncompteur permet egalement d'afficher le nombre 
de connexions simultanees a votre site web par 1' intermediate du 
Compteur Live : 

1 Identifiez-vous sur le site Moncompteur et selectionnez Compteurs 
live dans le menu Services. Cliquez sur le lien Creer un nouveau 
compteur live. 

2 Dans la section ADMINISTRATION DES COMPTEURS LIVE, 
personnalisez l'apparence de votre compteur Live. Le compteur 
est divisee en quatre zones distinctes qui peuvent etre 
personnalisees les unes apres les autres. Par defaut, la premiere 
section correspond au texte En direct. 

— Adresse web d'une image. Vous pouvez selectionner une image 
afin que votre compteur Live soit mieux visible sur votre page. 
Cette option est facultative. 

— Texte / Police /Taille. Determinez le texte a entrer sur votre 
compteur live ainsi que sa police et sa taille. A chaque 
modification, une mise a jour de 1'apercu est effectuee 
automatiquement. 

— Couleur du texte. Cliquez sur la liste deroulante afin de 
selectionner la couleur de votre texte. 

— Couleur du fond. Cliquez dans la liste deroulante pour modifier 
la couleur d'arriere-plan du compteur. 

— Retour a la ligne. Cochez la case Retour a la ligne si vous 
souhaitez que le texte du compteur s'affiche sur deux lignes 
(voir Figure 5.37). 

3 Afin de poursuivre la configuration du compteur Live, cliquez sur 
le lien Centrale, Arriere ou Bordure du compteur correspondant a 
une zone distincte. Modifiez les options selon vos besoins. 
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1 ADMINISTRATION DES COMPTEURS LIVE H 


Co 

Fscultatif Adresse web 
d'une image : 

Texte : 
Police : 
Taille : 

Couleur du texte : 
Couleurdufond : 
Retour a la ligne : 
Maintenant je souhaite 


nfiauration do la ZONE AVANT du compteur live 1 


' 


| VaSder |4> 


En direct 


"| Valider |4> 

Q Apercu 
Jj 


Anal 


v 

- 

|#FFFF66 ■ 


3 1 connecles sur le site | 
TjraJe, Arrigrg ou la bordyre du cgmoteyr 


mm m m 


r Non 

configurer la zone: Ce 


Q Retgurner # la liste de mes compteurs live 



Figure 5.37 : Personnalisation du compteur Live 



REMARQUE 



Utiliser les autres services du site 



Sur le meme principe, apres vous etes inscrit sur le site, Moncompteur 
.com vous offre gratuitement d'integrer sur votre site web un sondage, un 
compteur de clics ou encore la date et le saint du jour. L'apparence 
graphique de ces services est chaque fois entierement personnalisable. 



5.7. Utiliser un outil de statistique 

Afin d'optimiser votre site, il est indispensable de bien connaitre vos 
visiteurs. Combien sont-ils par jour ? Quels mots-cles ont-ils utilise ? 
Par quels outils de recherche sont-il passes ? 

Pour devenir incollable sur le chemin suivi par les internautes jusqu'a 
votre page, le site Xiti utilise par de nombreux professionnels propose 
une version gratuite de son editeur de statistique, destine a mieux 
controler la visibilite de vos pages. 

Facile a interpreter et agrementer de nombreux graphiques, cet outil 
vous aidera a mieux comprendre le trafic lie a votre site. II va au-dela de 
la comptabilisation du nombre de visiteurs afin de connaitre notamment 
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la resolution ou le navigateur utilises par l'internaute ainsi que sa 
localisation par continent. 



S'inscrire a Xiti 

1 Ouvrez votre navigateur et entrez l'adresse www.xiti.com. 
Cliquez sur le lien Solutions puis choisissez V option Xiti Gratuit. 
Afin d'ajouter Xiti sur un site personnel ou un blog, cliquez sur le 
bouton Site amateur. 




..i Solutions 
j Fonctiomialites 
..i Di'inniv.l rations 
..I I'liih Abonnement 

j Teclinolorjies 
..i References 
j Socletc 
..i Contact 



i nouvelle c, 

FONCTIONNAUTgS > DEMONSTRATIONS > TARIFS > 



Elude XiTIMowror 



Une namme de service* adaptee 
SOLUTIONS OE WEB-REPORTING 



VOtra sttfl et a votre budijet 



nmmercia 
SO 800 88 18 38 



1 



ft 



XITI PRO 

Site* vitrines, PME.PMI, petftes idministr «tion« 

STi Pro proj-ws «M |nwn*em q<pmtH «wn(4*M « tfflswt <t< Ij 
m«iur« at irtaHmtJoit. jv« an tortMi cLirtj « irnmiduurfttnc 



XlTI EXPERT 

Sites inter <jctrfs, sites c 




Lilt plus . 

■ ■lti l -lir.lif.WMM 



HB2EI35L3QH 



Tout© I'expertise XiTi au service de vos enjeux e-business 
SOLUTIONS BUSINESS INTELLIGENCE ET E-C0MMERC6 



i9 



303 994 abonnes 



XiTi ANALYZER 

c Commoicc, e Seivtce, ebuviness 

5o*jrity» h*j •*♦ (ptm* 4» r*w»9». <krtmo ki Jits pcjr tyi ts 

fjti.ilj(!»*i 4t ttni&RVM* ♦;1 ur* pmxfce «v« k> npxMt ROI. rite 

p*fmfi 0« mwtw r*f tit kK* 4tc xMftt ■«b-m«rt-«*«j 



Figure 5.38 : Le site Xiti propose une version gratuite de son outil de 
statistique 

2 Indiquez une adresse email valide et un mot de passe qui seront 
utilises pour vous identifier. Specifiez le titre du site, son adresse 
web et sa categorie parmi les options disponibles dans la liste 



LE GUIDE COMPLET 



205 



Chapitre 5 



Les ressources gratuites du Web 



deroulante. Indiquez si votre site propose de la vente en ligne en 
cochant le bouton radio Oui ou Non. Cliquez sur le bouton 
Valider. 

3 Indiquez votre date de naissance et votre situation professionnelle 
si vous le souhaitez. Cliquez sur le bouton Valider. 

4 La page suivante vous permet de definir la solution que vous 
souhaitez integrer. Cliquez en bas de la page sur le bouton 
S'inscrire afin de choisir la solution gratuite. 

5 Deux versions de Xiti sont actuellement disponibles. Choisissez la 
version 7. 



Integrer le marqueur Xiti 

1 Apres avoir selectionne la version de Xiti a utiliser, vous accedez 
a 1* interface d' administration du marqueur Xiti que vous allez 
pouvoir personnaliser avant integration dans votre site web. 
Cliquez sur le lien Configuration situe en haut a droite. 




iRmm 



Choisissez une cateoorie 



■■f >. Rdpvuri* 



■ b->0. »« -. . m.i-.^ .. 



ClNO ETAPES POUR BIEN UTILISER XITI 

<* treri voire *riion>uen(p 

^ Marqurj volrn sir* 

•3 c "•■-! vt ut-rr/ les ulilisoteurv 

yf I'Prsonnrtlit*/ vm rapporH 



Figure 5.39 : L'interface d'administration de Xiti lors de la premiere 
connexion 
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2 Cliquez sur 1'icone Marqueurs Xiti. Afin d' analyser votre site web, 
un code correspondant a un marqueur Xiti doit etre integre au sein 
de chacune de vos pages. Cliquez sur 1'icone Marqueurs de 
contenus. 



REMARQUE 



Conseils de marquage 

Pour avoir toutes les chances de reussir le marquage de votre site, 
cliquez sur le lien Conseils de marquage. Vous accederez a une 
documentation complete destinee a vous expliquer en detail le 
fonctionnement du marquage avec Xiti. 



Un code Javascript doit etre insere au sein de votre page web. 
Selectionnez 1' ensemble du code avec la souris. Lorsque 
l'integralite du script est en surbrillance, cliquez du bouton droit 
et selectionnez la commande Copier dans le menu contextuel. 

Si vous souhaitez inserer le marqueur au sein d'une plate-forme 
de blog, editez le code source pour integrer le code. 



Actuell StatisUques Articles Fichiers Design, 
■ Modifier un texte libre 



Blog Rank: 2 (23288 ama) 

Vtsrtaurs hebdomadairec 29 (27605 « 

Blog niveau: Premium 



Configuration Profit 



£& 



& 



Forum Aper$u Quitti 



Partenariat Aide 



3S°u.« 






>:/,., 



tl.a«p?s-271943 



Xt_param - 'S-271943E 
try (Xt_r - top. document .referrer; ) 
catch(e) (Xt_r - document. referrer; ) 
Xt_h - ne» Bote ( ) ; 

Xc_l - '<img Mxdth-"39" height-"25" border-*"0" •; 

Xt_i +• 'Brc-"http://logv32.xitl.com/lut.xlti?'+Xt_paraio; 

Xt_i +■ ' «hl" , -tXt_h.getHour3()* , x'+-Xt_h.getrnnute3l) 

+ ' x ' +Xt_h . getSeconds ( ) ; 

KlparseFloat (navigator. appVeralonl >-4| 

I Xt_a-ocreen; Xt_i+- ' (r- ' +Xt_s . width*' x' «Ct_s . height*' x ' »Xt_s. plxelDep 

trn-'x'+Xt_s. color Depth;) 

document. write(Xt_l+ , trer- , +Xt_r.replace(/l < >"]/g. ") .replace 

(/t/g, '?')+"* tltle-"Internet Audlence">'); 
II— > 

■c/ocript><noscrlpt></no3crlpt></a> 



Figure 5.40 : Insertion du code dans une page web 

5 Sinon, ouvrez votre page dans un navigateur web tel que 
Dreamweaver avec la commande Fichier/Ouvrir. Activez le mode 
Fractionner pour visualiser simultanement le code source et un 
apercu graphique de la page. 
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A 



ATTENTION 



Placez votre curseur a Fendroit ou vous souhaitez inserer le 
marqueur. Choisissez de preference un endroit discret, en bas de 
votre menu par exemple. Dans la zone source de la page 
correspondante, cliquez du bouton droit et choisissez la 
commande Coller. Le code insere correspond au script suivant : 

<a href="http://www.xiti.com/xiti.asp?s=27194 3" 

Sx title="WebAnalytics"> 

<script t ype=" text/ javascript "> 

<! — 

Xt_param = ' s=27194 3&p=page_accueil' ; 

try {Xt_r = top. document . referrer; } 

catch (e) {Xt_r = document . referrer; } 

Xt_h = new Date ( ) ; 

Xt_i = '<img width="39" height="25" border="0" ' ; 

Xt_i += ' src="http: //logv32 .xiti.com/hit 

S< .xiti?' +Xt_param; 

Xt_i += ' &hl='+Xt_h.getHours ()+'x'+Xt_h 

S< .getMinutes () +'x' +Xt_h . getSeconds () ; 

if (parseFloat (navigator . appVersion) >=4 ) 

{Xt_s=screen;Xt_i+=' &r=' +Xt_s . width+' x' +Xt_s 

8< .height + 'x' +Xt_s .pixelDepthH-' x' +Xt_s . colorDepth; } 

document. write (Xt_i+' &ref=' +Xt_r. replace (/ [<>"] /g, ' ' ) 

S< .replace (/&/g, '$')+'" title="Internet 

S< Audience ">' ) ; 

II— > 

</script> 

<noscript> 

Mesure d' audience ROI statistique webanalytics par 

X <img width="39" height="25" src="http: //logv32 . xiti 

$< .com/hit .xiti?s=271943&p='page_accueil' 

Sx alt="WebAnalytics" /> 

</ noser iptx/a> 



Utiliser efficacement le marqueur 

II est primordial de personnaliser pour chaque page les intitules situes 
en rouge dans les 2 variables &p sans oublier les guillemets. Ainsi lors 
de 1'insertion du marqueur dans la page d'accueil, vous indiquerez par 
exemple &p='page_accueil' . Pour la rubrique Photo, vous specifierez 
&p=' rubrique_photo' .N'utilisez ni espace, ni apostrophe, ni 
caracteres speciaux. N'oubliez pas d'actualiser ces deux intitules a deux 
reprises dans le script. 



7 Votre marqueur n'est pas visible dans Dreamweaver et ne 
s'affichera qu'apres publication de votre page web. Transferez la 
page sur votre serveur web, le petit logo Xiti s'affiche a Fendroit 
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specifie. Le logo est relativement discret et peut etre supprime 
dans la version payante. 




Figure 5.41 : 

Apercu du marqueur Xiti dans une page 
web 



Dans les 24 a 48 heures suivant F insertion de votre code, vous 
pourrez consulter les premieres statistiques sur votre site web en 
vous connectant sur le site www.xiti.com et en indiquant, dans le 
champ Login, Fadresse email enregistree lors de F inscription ainsi 
que votre mot de passe. 

Vous pouvez egalement consulter directement les rapports dans 
votre boite mail depuis le menu Rapports/Rapports par email 
accessible dans la section Configuration de F interface 
d' administration. 




<s 



;:::•::: 



Figure 5.42 ; 

Envoi des rapports 
par email 
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5.8. Afficher son statut de messagerie 
instantanee en ligne 

Si vous etes adepte des messageries instantanees telles que Yahoo! 
Messenger, MSN de Microsoft, ICQ ou AIM de AOL, vous pouvez 
afficher sur votre site web votre statut (connecte ou absent) afin de 
permettre aux internautes de vous contacter directement et rapidement. 

Procedez ainsi : 

1 Connectez-vous a l'adresse http://onlinestatUS.org/. Dans le menu 
situe a gauche, cliquez sur le lien Usage. 

2 Une liste de serveurs charges de verifier votre statut Messenger 
apparait. Cliquez sur l'icone que vous souhaitez inserer dans la 
page web. Cliquez sur la premiere adresse. 



DnNn. SUtus Indicator 

4aH) tfejiss) %*»•) 



In order to put an Online Status Indicator on your web page, yo 
lines of HTML code. 




m^o\ 



I1I....K..M.- 



IJX-J 
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Programs Free 
Download Now 
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Server Live on Your 
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i h.ll S.iftw.llo 

Chat Software 
Learn more today 



F le e Ch-H 
Service w Video 

Get Free Chat 
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Click on one of the OSI hosts below to get to the register page and get startedl 


OSI Host 


Sample icon 


Version 


Hosted by 


http;//osi.lishmirror.com;81/ 


Tfej> 


6.1 


lostinspace 


http://osi.hshh.org:8088/ 


(S 


6.1 


hunreal 


http://Dhl5.net:8000/ 


%BS 


6.1 


kakken 


http://onlinestatus.chrissearle.org:54345/ yawu»0 


6.1 


chrissearle 


http://imscatus.msitgroup.co,uk:81/ 


$222) 


6,1 


mansfieldweb 


http://snind.gotdns.com:8080/ 


® 


6.1 


SteveNind 


http://www.funnyweb.dk;8080/ 


13 


6.1 


Funnyweb 


http://osi .Canadian .net:8080/ 


A 


6.1 


KanadiaN 


http://public.hrristudios.net:8000/ 


4^m) 


6.1 


HackMaster 


http://www.the-server.net:8002/ 


* 


6.0 


Anders 


http://www.the-server.net:8001/ 


3fc^) 


6.0 


Anders 


http://www.the-server.net:3003/ 


9 


6.0 


Anders 


http://www.the-server.net:3000/ 


o 


6.0 


Anders 


http:/.*pnet.gotdns.org:7u7u/ 


Vavmi 


6.0 
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Figure 5.43 : Le site OnlineStatus 
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3 Afin de personnaliser le code a inserer sur votre page, remplissez 
le formulaire d'inscription. Specifiez dans la liste deroulante 
Messenger le type de messagerie que vous utilisez parmi les sept 
options proposees. 

4 Indiquez votre user ID (identifiant), c'est-a-dire le nom que vous 
utilisez pour vous connecter avec votre messagerie instantanee. 

5 Les icones qui s'afficheront par defaut sont visibles sous le 
formulaire. Si celles-ci ne vous conviennent pas, vous pouvez 
choisir d' inserer vos propres icones en indiquant leur adresse 
web. Dans le cas contraire, cliquez sur le bouton Get HTML code 
(Obtenir le code HTML) afin d' afficher le code a copier dans 
votre page. 

6 Selectionnez le code genere avec la souris, analogue au script 
suivant, a 1' exception de 1' identifiant et du type de messagerie 
selectionne qui vous sont personnels. 

<! — Begin Online Status Indicator code — > 

<! — http://www.onlinestatus.org/ --> 

<A HREF="ymsgr:sendIM?karine"> 

<IMG SRC="http: //osi. lishmirror.com: 81/yahoo/karine" 

align="absmiddle" border="0" ALT="Yahoo Online Status 

S< Indicator" 

onerror=" this. oner ror=null; this . src=' http: //osi 

£< . lishmirror.com: 81/image/yahoounknown.gif ' ; "></A> 

<! — End Online Status Indicator code — > 

7 Cliquez du bouton droit sur la selection et choisissez la 
commande Copier. 

8 Ouvrez votre page en mode Source puis inserez le code a 
l'endroit choisi en cliquant du bouton droit et en selectionnant la 
commande Coller. 

9 Publiez votre page web puis lancez votre messagerie instantanee. 
Votre statut est immediatement mis a jour. N'oubliez pas 
d'indiquer sur votre site votre identifiant si vous souhaitez que les 
visiteurs de votre page web puissent vous contacter directement. 



REMARQUE 



Modification de votre profil 

Dans la plupart des messageries instantanees, il est possible de 
desactiver la possibilite laissee a des utilisateurs inconnus de vous 
contacter directement. Si cette option est activee, l'icone Online Status 
apparaitra off line (non connecte) meme si vous etes on line (en ligne ). 
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N'oubliez pas dans ce cas de mettre a jour votre profil puis de 
relancer la page afin que l'icone s'actualise. 



5.9. Integrer un livre d'or 



Un livre d'or permet aux internautes qui visitent votre site de pouvoir 
laisser rapidement leurs commentaires et impressions. Inutile sur un 
blog qui integre deja cette fonctionnalite, le livre d'or s'installe 
facilement au sein d'un site web traditionnel afin d'ajouter de 
1' interactivity . 

Pour inserer facilement un livre d'or sur votre site, nous avons choisi de 
faire appel au service propose par le site Webdiz, qui propose egalement 
de nombreuses ressources pour webmestres (kits graphiques, polices de 
caracteres, scripts, etc.). 



S'inscrire en ligne 

1 Ouvrez votre navigateur Internet et entrez l'adresse 

http: //www. webdiz . com/services/livre_dor . php. 

2 Les fonctionnalites du livre d'or propose par Webdiz s'affichent a 
l'ecran. Cliquez sur le lien Inscription & avantages Club Webdiz afin 
d'acceder a ce service. 







jj? Service - Livre d'or 
Service i 
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Figure 5.44 ; 

Apercu du 
livre d'or 
propose par le 
site Webdiz 
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Un formulaire d'inscription s'affiche a l'ecran. Entrez votre 
prenom, un pseudonyme utilise comme identifiant, un mot de 
passe, une adresse email active ainsi que le nom et l'adresse de 
votre site sans oublier la mention http. 

Decochez la case S'inscrire a la newsletter de Webdiz si vous ne 
souhaitez pas recevoir la newsletter. Passez a l'etape suivante en 
cliquant sur le bouton Inscription. 

La liste des services mis a disposition des membres apparatt a 
l'ecran. Cliquez sur le lien Livre d'or. 



REMARQUE 



Gratuit ou payant 

L'ensemble des services proposes par le site Webdiz sont gratuits a 
condition d' accepter de la publicite sur votre site. Si vous souhaitez 
retirer la publicite, vous devez choisir la "version pro" accessible pour 
un appel par mois sur allopass (environ 1,85 €). 



Parametrer le livre d'or 

1 Le livre d'or cree par l'intermediaire du site Webdiz est 
entierement parametrable : couleur, police, taille de texte, 
insertion de smiley s, autant d' options que vous allez pouvoir 
determiner. Afin de poursuivre la mise en place du livre d'or, 
cliquez sur le lien Creer son livre d'or. 

2 Un message de confirmation apparait afin de vous indiquer que le 
compte est correctement cree. Les options de parametrage sont 
disponibles depuis le menu situe a gauche de la page. 

3 Afin de personnaliser le livre d'or, cliquez sur le lien 
Configuration. Indiquez un texte de bienvenue a afficher en haut de 
votre livre d'or (voir Figure 5.45). 

4 Tous les champs sont facultatifs. Indiquez si vous le souhaitez le 
texte a afficher en en-tete et en pied de page au format HTML. Si 
vous ne connaissez pas le langage HTML, entrez votre texte dans 
un editeur web tel que Dreamweaver puis copiez/collez le code 
source dans la zone de texte. 



REMARQUE 



Ouverture de pop up 

Afin de personnaliser l'aspect de votre livre d'or, le site Webdiz ouvre 
des pop up destine a selectionner couleurs et autres parametres. Afin d'y 
acceder, assurez-vous que votre navigateur ne fait pas appel a un 
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bloqueur de pop up integre. Le cas echeant, n'oubliez pas de le 
desactiver. 



webdiz 




M©drf*r vos 


nfO» 




R^mrtuHjtr 


otn 


compta 


Forum <J'«j 







Figure 5.45 : Creation et parametrage du livre d'or 

Entrez le texte a inserer au sein du mail de remerciement envoye 
automatiquement a chaque nouvelle inscription ainsi qu'une 
adresse vers une image d'arriere-plan. 

Personnalisez les couleurs du livre d'or puis cochez Qui pour 
1' option Anti-flood afin de filtrer les messages indesirables. 

Cliquez sur le bouton Modifier. Aucun message ne vous confirme 
la prise en compte des modifications mais cliquez sur le lien Voir 
votre livre d'or afin de constater les changements effectues. 



Integrer le livre d'or sur une page web 

1 Afin d' integrer le livre d'or sur votre site web, cliquez sur le lien 
Code HTML. Selectionnez le code a utiliser selon que vous 
souhaitez afficher le livre d'or en plein ecran, dans un pop up ou 
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une i-frame, c'est-a-dire une fenetre independante de votre site 
integree au sein de la page. 

Cliquez du bouton droit sur le code selectionne puis choisissez la 
commande Copier au sein du menu contextuel. 

Ouvrez votre page web dans un editeur web tel que Dreamweaver 
avec la commande Fichier/Ouvrir. Activez le mode Fractionner, 
placez le curseur a l'endroit ou vous souhaitez inserer le livre d'or 
et collez le code en mode Source. 

Transferez la page web sur votre serveur afin de tester votre livre 
d'or et poster un nouveau message. Pour envoyer un message sur 
le livre d'or, cliquez sur le lien Poster un message. Vous serez 
automatiquement averti par email a chaque fois qu'un message 
sera poste sur votre livre d'or. 



Retour au livre d'or 





JKarine 




|kanne@ho tmail.com 


■ 




|pans 




|w ww . sourcehtml .com 






: champs obligatoires 



Figure 5.46 : Envoi d'un message sur le livre d'or 

Afin de gerer les messages recus, connectez-vous sur le site Webdiz 
avec vos identifiants puis cliquez sur le lien Livre d'or et choisissez 
Administrer les messages dans le menu de parametrage du livre 
d'or. Vous pourrez supprimer les anciens messages ou les 
eventuels spams non filtres. II est conseille d' administrer 
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regulierement votre livre d'or afin de verifier la teneur des 
messages qui y sont postes. 

5.10. Proposer une newsletter 

La newsletter permet de tenir les visiteurs de votre site regulierement 
informes des nouveautes proposees : articles, rubriques, mise a jour 
importante, etc. Sur le site Webdiz, vous pouvez egalement integrer 
facilement un module de newsletter pour votre site web. 



Configurer la newsletter 

1 Connectez-vous a l'adresse www.webdiz.com/services/ges_newsletter 
.php. Un exemple de formulaire de newsletter est presente sur la 
page. II s'agit d'un champ de texte email avec deux boutons radio 
pour s'inscrire ou se desinscrire. 

2 Cliquez sur le lien Connexion afin de vous authentifier en 
indiquant votre pseudo et le mot de passe entre lors de 
1' inscription. 

3 Cliquez sur le lien Decouvrir et creer ce service situe a cote de 
l'icone Newsletter afin de mettre en place un module de newsletter 
pour votre site. 

4 La page suivante vous presente le service de newsletter de Webdiz. 
Afin de poursuivre le processus de creation, cliquez sur le bouton 
Creer son service de newsletter. 

5 Le menu Newsletter apparait en haut a gauche de votre page. 
Cliquez sur le lien Configuration. Dans les champs de 
configuration, vous devez entrer l'adresse HTML de quatre pages 
web : 

— une page web destinee a 1' inscription a la newsletter ; 

— une page web avec un message expliquant que l'adresse mail 
est deja entree ; 

— une page web invitant a renouveler l'inscription en cas d'email 
invalide ; 

— une page web permettant a l'internaute de se desinscrire de la 
newsletter. 
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6 Afin de creer ces pages web, utilisez un editeur web tel que 
Dreamweaver. Enregistrez ces quatre pages au format HTML et 
transferez-les sur votre site web. 

7 Indiquez leurs adresses respectives au sein de 1' interface de 
configuration de newsletter de Webdiz. Validez par un clic sur le 
bouton Modifier. 
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Figure 5.47 : Configuration d'une newsletter 



Inserer la newsletter dans une page web 

1 Afin d' integrer la newsletter dans votre page web, cliquez sur le 
lien Code HTML. Selon l'apparence donnee au module de 
newsletter, trois types de code vous sont proposes : 

— un formulaire avec inscription et desinscription ; 
_ un formulaire avec inscription uniquement ; 

— un lien supplemental afin d'afficher le nombre d'inscrits. 
Pour afficher ce lien, attendez d' avoir quelques inscrits a la 
newsletter afin de donner une meilleure image de votre site. 
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8EBEH5EB 



cooper 



Colter 
In lien de desinscription figure en bas de page , lors de jupprimer 
newsletter . 



lout selectiomer 



Figure 5.48 : 

Selection du 
code source 



Selectionnez le code choisi avec la souris. Cliquez du bouton 
droit dans la zone de texte. Choisissez la commande Copier. 

Ouvrez votre page web puis collez le code de la newsletter en 
cliquant du bouton droit. Vous pouvez utilisez un utilitaire tel que 
Dreamweaver afin de visualiser simultanement l'apparence de la 
page et son code source. 

Publiez votre page web en ligne afin de tester le module de 
newsletter. En entrant votre adresse mail dans le champ de texte et 
en cliquant sur le bouton Go, 1' adresse mail est automatiquement 
enregistree sur le site Webdlz. 

Afin de gerer les abonnes a la newsletter, activez le lien Les 
inscrits au sein de 1' interface d'administration. Vous pourrez 
modifier et supprimer les adresses enregistrees. 

Afin d'envoyer une lettre aux internautes inscrits, selectionnez le 
lien Envoyer une newsletter. Votre lettre sera automatiquement 
envoyee a 1' ensemble des inscrits. 



REMARQUE 



Des modules de newsletter avarices 

Si votre hebergeur prend en charge le PHP3 ou le PHP4 et dispose 
d'un acces a une base de donnees MYSQL, vous pouvez faire appel a 
phpMyNewsletter, disponible a l'adresse http://gregory.kokanosky.free.fr/v4, un 
module propose gratuitement avec une interface d'administration tres 
riche et simple d'emploi afin de gerer efficacement les abonnes a la 
newsletter. 



5.1 1 . Les points essentiels a retenir 

Si le Web etait encore il y a quelques annees le paradis des ressources 
gratuites, le choix reste important mais devient plus restrictif au fil des 
annees. Avant d' installer un service sur votre site web, verifiez les points 
suivants : 
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Evitez les services qui incluent des publicites intempestives de 
type pop up a chaque demarrage de 1' application. 

En cas de bannieres publicitaires obligatoires en echange du 
service rendu, verifiez la nature des sites dont vous ferez la 
publicite : sites X ou sites de jeux en ligne ne seront pas 
forcement toujours bien accueillis par vos visiteurs. 

Avant de vous lancer dans l'installation d'un service exterieur, 
assurez-vous prealablement aupres de votre hebergeur que ces 
services n' existent pas. Inutile en effet de passer du temps a 
installer un outil de statistique si celui-ci est deja present au sein 
de votre interface d'administration. 

Essayez de personnaliser dans la mesure du possible les 
ressources qui vous sont proposees aux couleurs de votre site 
web, afin de conserver une certaine homogeneite. 

Dans le cas des forums, chats et livres d'or, il est indispensable de 
moderer les messages recus et de verifier regulierement la nature 
des messages postes pour eviter les eventuels messages 
indesirables. 
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Creer des animations pour le Web avec Flash 



Flash est devenu aujourd'hui un element incontournable. C'est un 
logiciel d' animation multimedia principalement utilise pour le Web. II 
permet d'animer images, videos et textes afin de realiser des barres de 
navigation interactives, des animations de texte ou d' image mais aussi, 
dans ses fonctions les plus avancees des jeux, des dessins animes et 
meme des applications de e-commerce. 

Le succes de Flash reside dans son format particulierement adapte au 
Web, en raison de la legerete des animations creees. Les dessins utilises 
dans Flash sont de type vectoriel, c'est-a-dire que les formes generees 
avec Flash sont basees sur les coordonnees mathematiques de ces 
formes. A chaque modification ou redimensionnement, l'objet est 
redessine car recalcule ; il conserve ainsi une qualite optimale, quelle 
que soit la resolution adoptee. 



6.1. Installer Flash 

Afin de tester Flash, vous pouvez telecharger une version d' evaluation 
en francais sur le site de l'editeur. La nouvelle version de Flash, appelee 
Flash CS3 Professional, permet aussi bien de publier du contenu 
multimedia (video, musique, images, jeux, etc.) sur le Web que sur les 
peripheriques mobiles (telephone, PDA, etc.). 

1 Une version devaluation de Flash en francais, d'une duree de 
30 jours, est disponible sur le site d' Adobe a l'adresse www.adobe.fr. 
Dans la section PRODUITS, choisissez Flash (voir Figure 6.1). 

2 La version devaluation de Flash CS3 pese environ 400 Mo, une 
connexion haut debit est done indispensable. L' application sera 
chargee en 5 a 10 minutes (voir Figure 6.2). 

3 Double-cliquez sur l'executable pour lancer 1' installation. Le 
repertoire d' installation par defaut se situe dans le dossier 
C:\program Files\Macromedia. Si vous souhaitez changer le 
repertoire par defaut, cliquez sur le bouton Modifier. 

4 Lancez Flash en cliquant sur le raccourci insere sur votre Bureau 
Windows. Cochez le second bouton radio afin d'evaluer Flash 
puis cliquez sur le bouton Continuer. 
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Figure 6. 7 : Une version devaluation de 30 jours est disponible sur le 
site d'Adobe 




Emplacement du dossier 

Les fichiers telecharges doivent etre extraits pour pouvoir etre utilises, Indique2 le dossier 
dans lequel vous voulez les extraire, puis cliquez sur Suivanc. Le dossier est 
automatiquement cree s'il n'existe pas encore. 

Extraire Adobe Flash CS3 Professional dans : 



j C:\Documents and Settings\Compaq_Proprietaire\Bureau\Adobe CS3\Flash Profe 



A propos 



[ Suivant > | Annuler 



Figure 6.2 : Installation de Flash CS3 
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5 Dans 1' Assistant de projet, selectionnez le lien Ficher Flash (AS 3.0 
ou AS2.0) dans la colonne Creer et validez. 
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Figure G.3 : L 'Assistant de projet 



6.2. Decouvrir I'interface de Flash 

Afin de debuter avec Flash, ce chapitre va vous presenter les elements 
importants destines a vous familiariser avec le mode de fonctionnement 
de cette application unique en son genre. Flash est un logiciel 
d' animation qui vous permettra de bouger des objets, de creer des effets 
de morphing mais aussi de jouer du son ou de la video. 

Lorsque vous ouvrez le logiciel Flash pour la premiere fois, plusieurs 
elements apparaissent a l'ecran : 

le menu principal ; 
■ les outils de dessin ; 
le scenario ; 

la zone de montage et scene principale ; 
les panneaux de travail. 
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Figure 6.4 : L'interface de travail 



6.3. Le menu principal 

Le menu principal permet d'acceder aux fonctions les plus importantes 
de 1' application. Certaines vous seront familieres si vous avez deja 
employe un logiciel de retouche d'images tel que Photoshop ou l'editeur 
web propose chez le meme editeur, Dreamweaver. 

Les commandes du menu principal offrent les fonctions suivantes : 

Fichier. Ouvrir une animation ou creer une animation a partir d'un 
modele, enregistrer votre projet, importer des medias tels que 
sons, images, videos, etc. 

Modifier. Annuler une action, copier/coller des elements, 
determiner les preferences de 1' application, etc. 

Affichage. Ajuster le zoom, Inserer regies et grilles, naviguer entre 
les sequences, etc. 

Insertion. Inserer un caique, une image-cle, creer un nouveau 
symbole, etc. 
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Modification. Modifier les proprietes de 1' animation, du caique, 
transformer et deformer des objets, etc. 

Texte. Definir la police, la taille, la couleur, le style, l'alignement 
et verifier l'orthographe, etc. 

Commandes. Enregistrement de commandes frequemment 
utilisees pour une insertion plus rapide dans de nouvelles 
animations, etc. 

Controle. Lire et tester r animation dans le Flash Player, etc. 

Deboguer. Corriger les bogues de programmation. 

» Fenetre. Afficher/masquer les panneaux de travail de Flash, 
personnaliser 1' interface, etc. 

Aide. Afficher l'aide du logiciel. 



Les outils de dessin 

Les outils de dessin vous permettent de dessiner directement dans Flash 
au format vectoriel. 

La barre d' outils de dessin est utilisee pour creer, manipuler des formes 
vectorielles mais elle sert egalement a modifier des images de type 
bitmap prealablement importees dans Flash. Neanmoins, les fonctions 
d' edition de bitmap restent limitees a la rotation et au 
redimensionnement. 

1 Les outils de dessin font partie de l'interface par defaut. Si vous 
ne les voyez pas apparaitre, selectionnez la commande 
Fenetre/Outils ou utilisez le raccourci clavier [ Ctrl ) +fF2]. Cette 
barre d'outils est composee six parties principales : 

— Les outils de selection et de transformation avec l'outil de 
selection et de sous-selection, l'outil de transformation libre et 
le Lasso. 

— Les outils de creation qui comprennent les outils de formes et 
de texte ainsi que la Plume, un outil particulierement precis 
qui repond desormais dans Flash de la meme maniere que dans 
Photoshop ou Illustrator. 

— Les outils de remplissage, de selection et de modification de 
couleur avec le Pot de peinture, l'Encrier, la Pipette et la 
Gomme. 
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— Les outils d'affichage avec deux outils tres frequemment 
utilises, la Main, employee pour se deplacer dans la zone de 
travail et la Loupe, indispensable pour zoomer au sein de votre 
animation. 

— Les outils de couleur afin de definir la teinte utilisee pour 
remplir une forme et pour son contour. 

— Une derniere section d'options qui n'est pas fixe et s'adapte 
automatiquement aux elements selectionnes dans la partie 
Outils. 

Cliquez sur un outil pour le selectionner, par exemple l'outil 
Ovale (§§)). Dessinez sur la zone principale. Une couleur de 
remplissage et une couleur de contour sont automatiquement 
appliquees a votre dessin. 

Pour les modifier, rendez-vous dans la zone Couleurs de la barre 
d'outils Dessin afin de personnaliser les options. 
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Figure 6.5 : 

La barre d'outils Dessin 
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Pour davantage d' informations sur le fonctionnement des 
outils de des sin, reportez-vous a la section Dessiner avec Flash 
de ce chapitre. 



Le scenario 

Le scenario affiche chaque image de 1' animation. II est constitue de deux 
parties : 

L'echelle de temps determine la vitesse de V animation et affiche les 
differentes images creees au sein de la zone principale. 

Les caiques, a la base de toute animation, permettent de 
differencier les elements utilises et determinent leur position sur 
la zone de travail (premier plan, arriere-plan). 

L'echelle de temps 

L'echelle de temps determine la duree de 1' animation et permet de placer 
les images representant les differentes etapes de F animation. 

En bas du scenario sont affiches 1' image en cours, la cadence ou vitesse 
de l'animation, ainsi que le temps ecoule jusqu'a l'image en cours. 

Afin de modifier les proprietes de l'animation par defaut : 

1 Afin d'acceder aux proprietes du scenario, selectionnez la 
commande Modification/Document. Vous pouvez determiner la 
cadence de l'animation en ips (images par seconde), la largeur et 
la hauteur de la scene, la couleur d' arriere-plan, l'unite des regies, 
et ajouter un titre et une description (voir Figure 6.6). 

2 La cadence par defaut proposee par Flash est de 12 ips, mais il est 
conseille d'indiquer une cadence minimale de 24 ips pour une 
lecture plus fluide de vos animations. Cliquez dans le champ 
Cadence afin de modifier la cadence par defaut. Validez par un 
clic sur le bouton OK. 

Les images importantes, qui impliquent un changement, sont appelees 
images-cles et sont a la base de toute animation realisee avec Flash. 
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In doc urn 



Titre: Un singe dans la jungle 
Description: 



Dessin anime a destination d'un site pour 
enfants 



Dimensions : 550 px ; (largeur) x 400 px (hauteur) 
Identigue a : f) Imrjrimante Q Cgntenu Par defaut 
Couleur d'arriere-plan : J 

images/seconde 



: 24 



Unites de la regie : | Pi xels 



Etablir comme valeurs par defaut 



OK 



Annuler 



Figure 6.6 : La fenetre Proprietes du document 

Ajouter une image-cle 

Afin de creer les etapes cles de votre animation telles que modification 
de taille, de couleur, de transparence ou de position dans le cas de 
1' interpolation de mouvement ou de forme, il est necessaire de recourir 
aux images-cles. 

Procedez ainsi : 

1 Placez le curseur sur l'image numero 1. Selectionnez l'outil Ovale 
((o)) et dessinez un ovale sur la scene principale. Une image-cle, 
materialisee par un point noir, est automatiquement creee dans le 
scenario. 

2 Placez le curseur sur l'image 5 puis inserez une nouvelle image- 
cle avec la commande Insertion/Scenario/lmage-cle ou utilisez le 
raccourci clavier (F6) . 

3 Un rond noir materialise la nouvelle image-cle. Dans le scenario, 
l'intervalle entre chaque image apparait en gris clair. 

4 Conservez votre curseur sur l'image 5. Modifiez votre dessin en le 
deplafant sur la scene principale puis choisissez la commande 
Insertion/Scenario/Creer une interpolation de mouvement. 
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5 Flash se chargera automatiquement d'ajouter les images 
intermediaires entre les deux images-cles definies pour realiser 
une animation fluide. 




Figure 6. 7 : Creation d'images-cles 

&P Pour davantage d'informations sur les interpolations, reportez- 
renvoi vous a la section Creer une premiere animation de ce chapitre. 



Deplacer une image-cle 

Vous pouvez deplacer une seule image ou une sequence entiere de votre 
animation composee de plusieurs images-cles. 

Pour cela : 

1 Cliquez sur V image-cle a deplacer et maintenez le bouton de la 
souris. Avec cette technique, vous pouvez uniquement deplacer 
l' image vers l'arriere au sein de la ligne de temps. 
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2 Si vous placez le curseur entre les deux images-cles, un rectangle 
en pointilles s'affiche sous votre pointeur. Faites glisser votre 
souris afin de deplacer l'image ou la sequence d'images. 




Inverser rapidement le deroulement d'une animation 

Si vous souhaitez inverser une sequence d'images de votre animation, 
selectionnez-la dans le scenario et choisissez 
Modification/Scenario/lnverser les images. 



Dupliquer une image-cle 

Afin de copier rapidement une image-cle au sein de l'echelle de temps, 
il est interessant de faire appel a la technique du copier coller. 

Procedez ainsi : 

1 Selectionnez l'image-cle a dupliquer dans le scenario. Cliquez du 
bouton droit. Selectionnez Copier les images dans le menu 
contextuel. 

2 Placez- vous sous l'image de votre choix puis cliquez du bouton 
droit de nouveau et selectionnez la commande Coller les images 
dans le menu contextuel. L'image dupliquee s'affiche 
automatiquement dans l'echelle de temps. 
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Figure G.8 : Dupliquer une image-cle 



LE GUIDE COMPLET 



231 



Creer des animations pour le Web avec Flash 
Etendre la duree d'une image-cle 

Si vous souhaitez prolonger une etape de votre animation plusieurs 
secondes consecutives, vous devez etendre sa duree dans l'echelle de 
temps. 

Pour cela : 

1 Selectionnez 1' image-cle dont vous souhaitez etendre la duree en 
cliquant dessus. 

2 Maintenez la touche [Ait) enfoncee et glissez votre souris vers le 
numero d' image a atteindre. Un petit rectangle blanc materialise 
la fin de 1' animation. 

Supprimer une image-cle 

La multiplication d'images-cles inutiles a tendance a alourdir la fluidite 
de 1' animation finale mais aussi son poids. Pour supprimer une image- 
cle : 

1 Selectionnez-la puis cliquez du bouton droit. Selectionnez la 
commande Supprimer les images. Vous pouvez egalement utiliser 
cette technique pour raccourcir la duree d'une image-cle. 

2 Si vous souhaitez supprimer une image-cle et les images placees 
jusqu'a la prochaine image-cle, appuyez sur la touche |Suppij 
apres selection de 1' image-cle. 

3 Si vous souhaitez supprimer le contenu d'une image-cle, 
selectionnez 1' image-cle et selectionnez la commande Effacer les 
images dans le menu contextuel. L' image-cle apparaitra dans le 
scenario avec un rond vide. 



Les caiques 

Les caiques permettent d'empiler les differents elements de 1' animation 
et determinent lesquels se trouveront en premier ou en arriere-plan. II est 
egalement courant de differencier les caiques de dessin, contenant les 
elements graphiques de votre animation, des caiques d' action, contenant 
du code afin de creer de 1' interactivity. 

1 Afin d'inserer un nouveau caique, choisissez la commande 
Insertion/Scenario/Caique ou cliquez sur l'icone Inserer un caique 
situee en bas du scenario. Le nouveau caique se place 
automatiquement au-dessus du caique precedent et devient le 
caique actif. 



232 



LE GUIDE COMPLET 



Le menu principal 



Chapitre 6 



Par defaut, le nouveau caique cree se nomme Caique 2. Afin de 
lui donner un nom plus explicite, cliquez du bouton droit dessus 
et selectionnez la commande Proprietes. 

La fenetre Proprietes du caique apparait. Elle permet de 
renommer votre caique mais aussi de choisir sa hauteur ou sa 
couleur de contour. Dans ce cas, seuls les contours des objets 
places sur le caique sont visibles sur la scene. 



1 

Proprietes du caique 




Nom : | Actions OK 




0Afficher nverrouiller [ Annuler 


Type : Normaies 
O Guide 

O Masque 
;que 
O Dossier 
Couleur du r— i 
contour : _ zl 

O Aff icher le caique sous forme de contours 

Hauteur du . _. 

caique : 1 100% vj 



Figure 6.9 : La fenetre Proprietes du caique 

4 Afin de supprimer un caique, selectionnez le caique a supprimer 
puis cliquez sur l'icone Supprimer le caique en bas du scenario. 



ASTUCE 



Selection rapide de caiques 

Afin de selection ner s imultanement plusieurs caiques, cliquez tout en 
maintenant la touche (Maj) enfoncee. 



5 L' importation de fichiers graphiques de type Photoshop ou 
Illustrator est possible depuis Flash avec la commande 
Fichier/lmporter tout en conservant les caiques de vos images. 

Organiser vos caiques 

Afin d'en finir avec les nombreux caiques empiles dans le scenario, 
Flash offre la possibilite de creer des dossiers pour classer vos caiques : 
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Afin de creer un dossier, choisissez l'icone Inserer un dossier de 
caiques placee en bas a gauche du scenario ou selectionnez la 
commande Insertion/Scenario/Dossier de caiques. 
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Inserer un dossier de caiques 



Figure 6. 10 : 

Ajouter un dossier de 
caiques 



2 Nommez votre dossier et placez les caiques que vous souhaitez y 
voir figurer par un simple glisser deplacer en maintenant le 
bouton de la souris enfonce. Les caiques places a Finterieur d'un 
dossier sont automatiquement deplaces d'un cran vers la droite. 

Verrouiller les caiques 

Verrouiller un caique evite de le modifier par erreur, tout en le laissant 
visible sur la scene. Lors de F utilisation de caiques speciaux, comme les 
masques, il est indispensable que les caiques soient verrouilles pour que 
Feffet fonctionne. 

1 Pour verrouiller un caique, cliquez sur le point noir situe sous 
l'icone du verrou. Pour annuler le verrouillage, cliquez sur l'icone 
Verrou correspondant au caique a deverrouiller. 

2 Si vous souhaitez verrouiller tous les caiques d'un seul clic, 
cliquez sur l'icone du verrou en haut de la fenetre Scenario. 




Figure 6.11 : Verrouiller/ deverrouiller les caiques 

3 Afin de verrouiller tous les caiques a F exception du caique 
selectionne, cliquez sur le rond noir sous le verrou tout en 
maintenant la touche [Alt] enfoncee. 
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La table de montage correspond a la zone de couleur grise entourant la 
scene qui vous permet de deposer des objets sans que ceux-ci soient 
visibles lors de F exportation. 

1 Cliquez du bouton droit sur la zone de montage pour acceder 
rapidement a un menu contextuel destine a ajouter regies, grilles 
ou guides afin de positionner plus precisement les elements. 







^^k- 


Coupet 




w 


Copier 
Coller 

Colter en p: 




Selectionner tout 




Tout deselectionner 




Regies 

Grille ► 




Guides ► 






Accrochage ► 




Proprietes du document... 




Ajouter au nouveau projet 











Figure 6. 12 : Menu contextuel de la zone de montage 

2 Tous les elements devant apparaitre dans F animation finale seront 
places dans la scene principale, par defaut de couleur blanche, a 
Fouverture d'une nouvelle animation. 



Les principaux panneaux de travail 

Les differents panneaux sont au cceur de F interface de Flash. lis 
permettent de gerer et d'optimiser vos animations, d'inserer et d'aligner 
du texte. Leur fonctionnement est analogue a celui des autres logiciels 
Adobe tels que Dreamweaver ou Photoshop. Tous les panneaux sont 
accessibles par le menu Fenetre. 

Voici un petit tour d' horizon des plus utilises pour animer efficacement 
avec Flash : 

Le panneau Aligner permet de placer des elements de F animation 
par rapport a la scene ou a d' autres elements. 
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Les panneaux Couleur et Nuanciers permettent de selectionner, 
memoriser une couleur, influer sur la teinte, la saturation ou la 
luminosite des couleurs. 

Le panneau Info donne des informations sur la taille et la position 
des occurrences placees sur la scene. Les informations de position 
et de taille sont egalement reprises dans l'inspecteur de proprietes. 

La Bibliotheque stocke tous les elements de votre animation pour 
un acces rapide. 

Le panneau Actions est l'un des elements cles de 1' interface de 
Flash. II est indispensable pour ecrire et controler votre code 
Action Script. 

L'inspecteur de proprietes affiche les proprietes de 1'objet 
selectionne dans la scene principale. 
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Figure G.I 3 : 

Les principaux panneaux de travail 
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Organiser les panneaux de travail 

Flash offre une vingtaine de panneaux et fenetres. L' interface de Flash 
est gourmande en espace. Si vous n'avez pas la chance de posseder un 
ecran 19 pouces, il est indispensable d' organiser votre espace de travail 
afin d'eviter autant que possible de deplacer vos panneaux. Tous les 
panneaux sont empilables et peuvent etre deplaces individuellement. 

Procedez ainsi : 

1 Pour deplacer une palette, placez la souris sur son onglet puis 
glissez deplacez le panneau a l'endroit de votre choix. L' interface 
se module selon la disposition des panneaux. 
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Figure 6. 14 : Deplacer les panneaux 



2 Pour ajouter un nouvel onglet, il suffit de le deplacer a l'endroit 
voulu. Pour deplier ou retracter une palette, cliquez sur le petit 
trait situe en haut a droite. 
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Personnaliser I'interf ace de travail 

L' interface de Flash prend beaucoup de place et une resolution minimale 
de 1 024 * 768 est conseillee. 

1 Flash propose par defaut dans le menu Fenetre/Espace de travail 

une configuration de panneaux par defaut correspondant aussi 
bien aux graphistes qu'aux developpeurs. 

2 Afin d'alleger 1' interface de Flash, vous pouvez choisir de 
n'afficher que les icones des panneaux de travail avec la 
commande Fenetre/Espace de travail/lcones uniquement par 
defaut. 

3 Flash offre egalement la possibilite d'enregistrer votre propre 
configuration : c'est particulierement utile si vous partagez votre 
ordinateur, afin de retrouver a chaque fois un espace de travail 
personnalise. 

4 Placez les panneaux selon votre convenance puis selectionnez la 
commande Fenetre/Espace de travail/Enregistrer la presentation 
active. Nommez votre configuration personnalisee et validez. 

5 Votre interface de travail personnalisee est sauvegardee. Afin 
d'acceder a votre configuration, activez la commande 
Fenetre/Espace de travail/Gerer. Choisissez la disposition 
precedemment enregistree. 
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Figure 6. 15 : Personnaliser I'interf ace de travail 
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Vous pouvez importer des images bitmap issues de Photoshop mais 
aussi des fichiers vectoriels depuis un logiciel tel qu' Illustrator au sein 
de Flash. Les images bitmap sont composees de pixels, c'est-a-dire de 
petits carres de couleur etires et modifies en cas de redimensionnement, 
perdant en qualite, contrairement a 1' image vectorielle qui sera 
recalculee et done redimensionnee sans perte de qualite. 

Flash offre egalement des outils de dessin particulierement performants 
pour realiser des animations plus legeres. 



Positionner precisement des objets 

Afin de vous aider a manipuler et positionner vos objets, Flash dispose 
de plusieurs outils tels que la grille, les regies et les guides. Ces outils 
ont pour unique objectif de vous aider lors de la realisation de votre 
animation. lis seront totalement invisibles dans le resultat final. 



La grille 

II est possible d'afficher un quadrillage sur votre zone de travail, afin de 
placer precisement vos objets. 

1 Pour afficher la grille, selectionnez Affichage/Grille/Afficher la 
grille. Votre quadrillage est alors visible sur la zone de travail. 

2 Afin de modifier les options de la grille, selectionnez la 
commande Affichage/Grille/Modifier la grille. Plusieurs options 
sont disponibles : 

— Le selecteur de couleurs permet de modifier la couleur du 
quadrillage. 

— Afficher la grille rend cette derniere visible ou invisible. 

— Accrocher a la grille. La grille est magnetisee lors du placement 
de vos objets. 

— Deux champs determinent la dimension des carreaux qui 
composent le quadrillage. Cette dimension est exprimee par 
defaut en pixels. 

— Precision de I'accrochage affine le magnetisme des objets a la 
grille. 
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— Enreg. par defaut vous permet de retrouver ces parametres par 
defaut lors du prochain affichage de la grille. 
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Figure 6. 16 : 

Affichage de la grille 
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Ajouter du magnetisme sur vos objets 

Une option disponible dans Flash permet d'accrocher aux pixels vos 
objets, arm de les positionner au pixel pres. Ces options sont accessibles 
depuis le menu Affichage/Accrochage. 



Regies et guides 

Les guides sont disponibles uniquement si les regies ont ete 
precedemment activees. lis vous aident a delimiter des zones precises au 
sein de vos animations afin d'y placer des objets au pixel pres. 

Procedez ainsi : 

1 Selectionnez la commande Affichage/Regles pour activer les 
regies. Les regies encadrent votre animation ; le pixel est leur 
unite de mesure par defaut. 
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Figure 6.17 : 

Affichage des regies 
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Pour creer un guide, cliquez sur la regie en maintenant le bouton 
de la souris enfonce et glissez le curseur vers la scene. Le guide 
peut etre vertical ou horizontal, selon l'endroit ou vous avez 
clique. Par defaut, il est de couleur vert clair. 

Afin de deplacer un guide sur la scene, I'outil de selection ((V)) 
doit etre active. 

Pour modifier un guide, selectionnez la commande 
Affichage/Guides/Modifier les guides. Plusieurs options sont 
disponibles : 

— Le selecteur de couleurs permet de modifier la couleur des 
guides. 

— Afficher les guides rend ces derniers visibles ou invisibles sur la 
scene. 

— Accrocher aux guides affecte un magnetisme aux guides lors du 
placement d'un objet. 

— Verrouiller les guides empeche un guide d'etre deplace avec le 
curseur. 




Figure 6. 18 : Afficher un guide 
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Importer des images bitmap 

Une image bitmap est une image realisee dans un logiciel de retouche 
photo tel que Photoshop. Si vous souhaitez importer une image bitmap 
dans Flash, celle-ci ne doit pas presenter une palette de couleurs trop 
etendue afin d'etre vectorisee. II est done preferable d' importer dans 
Flash des cliparts ou des illustrations plutot que des photos. 

1 Selectionnez la commande Fichier/lmporter/lmporter dans la 
scene dans le menu principal. Choisissez 1'image bitmap au 
format JPEG ou GIF, par exemple, a importer dans le disque dur. 

2 Utilisez la fleche de selection de la barre d'outils afin de 
selectionner votre objet. Celui-ci apparait encadre par une bordure 
en pointilles. 

3 Choisissez la commande Modification/Bitmap/Tracer le Bitmap. 

La fenetre de vectorisation s'affiche. Differentes valeurs sont 
modifiables : 

— Seuil de couleur. Plus cette valeur est basse, plus le nombre de 
couleurs est important. 

— Zone minimum. Plus cette valeur est basse, plus 1'image sera 
preservee (entrez une valeur basse pour des images 
complexes). 

— Aspect des courbes. Determine le degre de lissage (si vous 
avez une image complexe, choisissez la valeur "pixel"). 

— Seuil d'angle. Determine la complexite des formes qui 
composent 1'image. 

4 Maintenant que votre image est vectorisee, vous pouvez 1'utiliser 
comme n'importe quel dessin realise avec Flash afin d'y ajouter 
des effets speciaux pour la creation d' animation (voir 
Figure 6.19). 

5 La derniere version de Flash offre egalement la possibility 
d' importer des fichiers .PSD crees avec Photoshop tout en 
conservant l'ensemble des caiques associes a 1'image au sein de 
Flash. Suivez la meme manipulation que celle decrite 
precedemment puis definissez les options de chaque caique depuis 
la fenetre Importer sur la scene (voir Figure 6.20). 
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Tracer le bitmap 



Seuil de couleur : 
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Zone minimum : 
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Figure 6. 19 : 

La fenetre Tracer 
J Bitmap 



Importer "ban.psd" sur la scene 



Activer la case a cocher des caiques Photoshop a importer : 
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Figure 6.20 : Importer un fichier photoshop au format PSD 
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Tracer lignes et courbes 

Flash permet tres facilement de creer des courbes parfaites grace a la 
barre d'outils Dessin. 

Procedez ainsi : 

1 Creez un nouveau caique et nommez-le Hiver. Un sapin va etre 
dessine sur le caique Hiver. 

2 Selectionnez le caique Hiver. Assurez-vous que celui-ci est en 
surbrillance ; cela signifie qu'il est actif. 

3 Dans la barre d'outils Dessin, choisissez l'outil Ligne ((Np). Optez 
pour une couleur de trait vert fonce. 

4 Afin de determiner le type de trait a utiliser, ouvrez l'inspecteur 
de proprietes et choisissez un style de ligne Continue avec une 
epaisseur de 3. 

5 Placez votre curseur sur la scene tout en maintenant le bouton de 
votre souris enfonce. Tracez une premiere diagonale vers la 
gauche. 

6 Relachez le bouton de votre souris puis tracez une ligne droite 
horizontale. Reproduisez cette manipulation trois fois afin 
d'obtenir le premier cote de votre sapin. 

7 Pour obtenir un cote parfaitement symetrique, dupliquez la partie 
gauche de votre sapin avec le raccourci clavier [Ctrll +fc] 
(copier)/fCtfT]+fv] (coller). 

8 Activez la commande Modification/Transformer/Renverser 
horizontalement afin d'obtenir deux cotes identiques. Ajustez le 
sommet du sapin a l'aide de l'outil de selection ((V)). 

9 Assurez-vous que les traits sont relies entre eux avec l'outil Zoom 
((z)) afin de pouvoir colorier votre sapin. 

10 Pour joindre plus facilement deux extremites, selectionnez l'outil 
de selection ((Vj) et activez l'outil Aimant present dans les options. 
Pour courber vos lignes, placez l'outil de selection ((Vj) sur votre 
ligne tout en maintenant le bouton de la souris enfonce (voir 
Figure 6.21). 
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11 Votre fleche sera aimantee et vos extremites plus faciles a joindre. 
Si vous avez besoin de vous deplacer sur la scene, utilisez l'outil 
Main ( [Barre d'espacej ). 



Adobe Flash CS3 Professional - [sapin. fla] 
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Figure 6.21 : Sapin dessine avec l'outil Ligne 
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12 Enregistrez l' animation avec la commande Fichier/Enregistrer 
sous et nommez-la Hiver. L'animation est sauvegardee au 
format .fla, le format source de Flash qui vous permet d'editer une 
animation. 

Optimiser vos traces 

Le point fort de Flash reside dans la legerete de ses animations. Aussi, 
afin de traquer le moindre kilooctet superflu, il est important d' optimiser 
vos differents traces. L' optimisation de traces est egalement utile pour 
rendre plus legeres des images bitmap prealablement importees dans 
Flash. 

Procedez ainsi : 

1 Selectionnez une forme sur la scene principale avec Foutil de 
selection ((V)). Le dessin apparait en pointilles. 

2 Activez la commande Modification/Forme/Optimiser. La boite de 
dialogue Optimiser les courbes apparait. 

— Plus 1' option Lissage est au maximum, plus le nombre de 
courbes sera reduit. 

— L' option Appliquer plusieurs passages engendre un lissage plus 
fort (mais plus lent). 

— L' option Afficher le message des totaux affiche le resultat de 
votre optimisation. 

3 Plus le pourcentage de reduction applique est important, plus 
l'optimisation est reussie. Une boite de dialogue s'affiche afin 
d'indiquer le resultat de l'optimisation. 
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Figure 6.22 : Optimiser les courbes 
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Aller plus loin avec les outils vectoriels 

Tout objet vectoriel est toujours constitue de traces de Bezier (du 
mathematicien Francais Bezier) correspondant a des droites ou des 
courbes realisees en manipulant des poignees de controle par le biais de 
points d'ancrage. 

Deux outils sont utilises pour tracer des courbes de Bezier precises : 
l'outil Fleche de sous-selection et I'outil Plume. 



L'outil de sous-selection 

Grace a la fleche de sous-selection, vous pouvez tracer des courbes avec 
des points directeurs, comme vous le feriez dans des logiciels vectoriels 
tels qu' Illustrator. 

Procedez ainsi : 

1 Dessinez une ellipse sur la scene avec l'outil Ovale ((o)) de la 
barre d'outils puis selectionnez l'outil de sous-selection ([a]) 
represents par une fleche blanche. 

2 Placez l'outil de sous-selection ((a)) sur le contour de votre 
ellipse. Les 8 points d'ancrage constituant votre forme sont 
apparents. Un point directeur est associe a chaque point d'ancrage 
(voir Figure 6.23). 

3 Placez votre curseur sur l'un de ces points. Un petit carre blanc 
doit apparaitre. Maintenez le bouton de votre souris enfonce tout 
en tirant un point vers l'interieur. Votre forme est modifiee en 
fonction de la direction choisie. 



ATTENTION 



Positionner precisement le curseur 

En plagant le curseur a cote d'un point d'ancrage, un petit carre noir 
apparait, Maintenez le bouton de la souris enfonce tout en tirant vers 
l'exterieur ; l'objet se deplace dans son integralite. Si le curseur est sur 
le point, un petit carre blanc s'affiche. Vous pouvez modifier la forme en 
tirant dessus, en maintenant le bouton de la souris enfonce. 
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4 Notez egalement la ligne verticale avec deux cercles pleirts a 
chaque extremite ; il s'agit du point directeur. II va vous permettre 
d'attribuer une trajectoire precise a voire point. Le point 
d'ancrage est represente par un cercle vide (voir Figure 6.24). 



Adobe Flash CS3 Professional - [exemple.fla] 
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Figure 6.23 : Selection d'une forme avec /'out/7 de sous-selection 

5 Relachez le bouton de la souris. Votre nouvelle forme apparait sur 
la scene principale. 
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Figure 6.24 : Modification d'une forme 



La Plume 

L'outil Plume est indispensable a tout logiciel de dessin vectoriel mais 
n'est pas aussi intuitif que les autres outils de dessin de Flash, si vous 
n'etes pas deja familiarise avec un logiciel vectoriel. 

Contrairement a l'outil de sous-selection, utile pour modifier des 
courbes et des lignes existantes, l'outil Plume permet de les creer. 

L'outil Plume insere un point d'ancrage a chaque fois que vous cliquez. 
Des points directeurs sont automatiquement associes a chaque point afin 
d'ajuster la courbe. 
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Creer lignes et courbes 

1 Selectionnez l'outil Plume (fpj) de la barre d'outils. Cliquez une 
premiere fois sur la scene ; un point d'ancrage apparait. Relachez 
votre souris et placez un second point ; une premiere ligne est 
tracee. 
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Figure 6.25 : Creation d'une nouvelle forme 



ip' Creer une ligne droite 

Afin de creer un segment parfaitement droit, maintenez la touche [Maj] 
enfoncee lors du clic sur le second point d'ancrage. 



2 En maintenant le bouton de la souris enfonce lors du trace de 
votre ligne, vous pouvez facilement creer une courbe. 
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3 Choisissez de nouveau l'outil Plume ((p)) afin d'ajouter de 
nouveaux points directeurs. Positionnez la Plume sous le segment 
pour faire apparaitre un petit rond blanc. 



Figure 6.26 I 

Ajout de nouveaux points d'ancrages 



Faites un mouvement vers la gauche ou la droite avec la plume. 
Votre ligne devient courbe et deux points directeurs apparaissent 
de part et d' autre de votre point. 

Relachez le bouton de votre souris. Vous obtenez une courbe avec 
de nouveaux points d'ancrage. II est egalement possible d'ajouter 
des points d'ancrage supplementaires. 
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Figure 6.27 : Ajout de nouveaux points d'ancrage 
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Modifier les points d'ancrage 

1 Choisissez l'outil de selection ((V)) afin de deselectionner votre 
courbe puis activez de nouveau l'outil Plume ((p)). Choisissez 
Ajouter un point d'ancrage dans les options de l'outil Plume. 

2 Placez-vous sur la courbe ; un petit "+" apparait. Cliquez pour 
creer un nouveau point d'ancrage. 

3 Pour supprimer un point d'ancrage, selectionnez-le avec l'outil de 
sous-selection ((a)) puis appuyez sur la touche (Suppr) ou utilisez 
l'outil Supprimer un point d'ancrage dans les options de la 
Plume. 

4 Vous pouvez egalement modifier 1' orientation d'un point 
d'ancrage en placant l'outil Plume ((p)) dessus. Un cercle vide 
apparait sous la Plume. II suffit de deplacer la souris tout en 
maintenant le bouton gauche enfonce pour changer 1' orientation 
du point. 

Colorier un objet 

L'outil Pinceau est pratique pour remplir une forme avec precision. Cet 
outil dispose de multiples formes de pinceaux et modes de dessin. 

1 Selectionnez la commande Fichier/Ouvrir. Choisissez 1' animation 
Hiver . f la sur votre disque dur. 

2 Dans la barre d'outils Dessin, selectionnez l'outil Pinceau ((¥)). 
Dans les options de la barre d'outils, differents modes sont a votre 
disposition afin de definir les zones auxquelles la couleur sera 
appliquee. 

_ Peint normalement applique la couleur de maniere habituelle. 

_ Peint les zones remplies modifie uniquement l'interieur de 
votre forme ; les contours demeurent inchanges. 

_ Peint derriere applique la couleur uniquement aux endroits 
libres sans modifier la couleur de premier plan. 

— Peint la selection s' applique uniquement a une zone que vous 
aurez prealablement selectionnee. 

— Peint a l'interieur permet de donner des coups de pinceau a 
l'interieur d'une forme sans debordement possible. 
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Afin de colorier le sapin avec l'outil Pinceau, activez 1' option 
Peint a l'interieur et optez pour un vert legerement plus clair que 
celui utilise pour le contour en couleur de remplissage. 

Placez votre curseur au centre du sapin et tracez un trait en 
depassant volontairement les limites de celui-ci. Relachez la 
souris ; votre trait est bien reste a l'interieur. Continuez afin de 
remplir toute la forme. 
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Figure 6.28 : 

Remplissage 
du dessin 



ATTENTION 



N'oubliez pas de fermer votre forme 

Si vous n'arrivez pas a peindre a l'interieur d'une forme avec l'outil 
Pinceau, assurez-vous que votre forme est fermee. Pour vous en assurer, 
n'hesitez pas a zoomer en appuyant sur la touche (z). 
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5 Afin de remplir une forme prealablement fermee rapidement, vous 
pouvez egalement selectionner l'outil Pot de peinture ((§). 

Ajouter une couleur 

Toutes les couleurs sont stockees au sein du panneau Nuanciers. Vous 
pouvez a tout moment ajouter une nouvelle couleur aux teintes 
proposees par defaut afin d'acceder plus rapidement a une nuance 
utilisee frequemment dans une animation. 

1 Pour ouvrir le panneau Nuanciers, selectionnez la commande 
Fenetre/Nuanciers. 

2 Selectionnez une couleur de remplissage dans la barre d'outils 
Dessin. Pour ajouter cette couleur dans le panneau Nuanciers, 
cliquez sur la partie grise situee sous les couleurs par defaut. La 
couleur selectionnee apparait. Cette couleur sera disponible 
uniquement pour 1' animation en cours. 




Figure 6.23 : 

Couleur de remplissage 
a choisir dans le nuancier 



3 Pour supprimer une couleur dans le panneau Nuanciers, 
maintenez la touche (ctrT) enfoncee tout en cliquant sur le nuancier. 
Une petite paire de ciseaux apparait et votre couleur est 
supprimee. 
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Creer un degrade 

Afin de creer des degrades, vous ferez appel au panneau Couleur destine 
a ajouter et modifier des couleurs unies, degradees ou texturees. 

1 Ouvrez le panneau Couleur, accessible avec la commande 
Fenetre/Couleur. Ce panneau permet de modifier et creer de 
nouvelles couleurs. 

— La partie superieure permet de modifier les couleurs de trait et 
de remplissage. Les couleurs affichees sont extraites d'un 
nuancier ; seule une couleur deja creee dans le nuancier peut 
done apparaitre dans le melangeur de couleurs. 

— La barre de couleurs situee en dessous permet de selectionner 
plus precisement une teinte. 

— Dans la partie inferieure du panneau, vous accedez ainsi a de 
nouvelles options telles que le code RVB (composante de 
rouge, de vert et de bleu) de la couleur. 

— L' alpha permet de definir la transparence d'une couleur (0 = 
transparent et 100 = opacite maximale). 

2 Afin de creer un degrade, selectionnez Lineaire (degrade en ligne) 
ou Radial (degrade en rond) dans la liste deroulante Type. Les 
petits pointeurs places sous la barre de degrade definissent la 
couleur de depart et la couleur d'arrivee du degrade. Vous pouvez 
placer jusqu'a 8 pointeurs afin de creer des nuances 
supplementaires. 

3 Pour ajouter une couleur dans le degrade, vous devez ajouter un 
pointeur supplementaire. Placez votre curseur sous la barre de 
couleurs entre les deux pointeurs initiaux ; un petit + apparait. 

4 Cliquez a l'endroit ou vous souhaitez placer le nouveau pointeur. 
Celui-ci est ajoute automatiquement. Choisissez la couleur 
affectee a ce nouveau pointeur en cliquant dessus. 

5 Pour supprimer un pointeur, faites-le glisser vers le bas de la 
palette. 

6 Afin d'enregistrer votre degrade, selectionnez la commande 
Ajouter un nuancier dans le menu des options du panneau 
Couleur, accessible en cliquant sur la fleche situee dans Tangle 
superieur droit du panneau. 
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Figure 6.30 : 

Creation d'un degrade 
dans le panneau Couleur 



7 Le nouveau degrade s'affiche en couleur de remplissage dans la 
barre d'outils Dessin. Utilisez l'outil Pot de peinture (Q<)) ou 
Pinceau ((b)) afin de colorier avec cette nouvelle nuance. 

Modifier un degrade 

Vous pouvez facilement modifier un degrade a l'aide de l'outil 
Transformer le remplissage ((f)) disponible dans la barre d'outils. 

1 Pour modifier le degrade applique dans un objet, selectionnez 
votre objet sans son contour en cliquant a l'interieur avec l'outil 
Fleche de selection ((y)). 

2 Activez l'outil Transformer le remplissage ((f)) de la barre 
d'outils. 

3 Manipulez les poignees de rotation et de redimensionnement afin 
de modifier votre degrade (voir Figure 6.31). 

4 L' option Verrou de la barre d'outils permet d'affecter un degrade 
commun a plusieurs formes ou sur l'une d'elle seulement s'il est 
enfonce. Si votre degrade ne correspond pas a vos attentes, 
verifiez si cette option est activee ou non. 
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Figure 6.31 : L'outil Transformer le remplissage 



Manipuler des objets 

Afin de manipuler plus facilement les differentes formes realisees avec 
les outils de dessin de Flash, de nombreuses options sont a votre 
disposition pour les grouper, les redimensionner ou les deformer. 

Grouper des objets 

Les differents elements d'un objet peuvent etre modifies ou supprimes 
separement. Vous pouvez aussi reunir les elements constituant votre 
objet afin de les deplacer facilement en un seul bloc, les redimensionner 
ou les modifier. 

1 Dessinez un rectangle et un rond a l'aide des outils Rectangle 
(§§]) et Ovale ((©)) disponibles dans la barre d'outils. Vos deux 
formes ne doivent pas se toucher. 
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Activez I'outil de Selection ((V)) dans la barre d'outils Dessin. 
Selectionnez le carre et le rond places sur votre scene. Un 
rectangle de selection apparait autour de vos objets. 

Relachez le bouton de la souris ; vos deux objets sont selectionnes 
et apparaissent en pointilles. 

Afin de deplacer simultanement 1' ovale et le carre, vous devez les 
grouper. Selectionnez la commande Modification/Grouper. Activez 
I'outil de Selection ((V)) et selectionnez l'objet groupe. Vous pouvez 
maintenant deplacer en meme temps votre carre et votre rond. 
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Figure 6.32 : Deplacement d 'objets groupes 

5 Si vous souhaitez realiser la manipulation inverse, c'est-a-dire 
degrouper ou dissocier vos objets, selectionnez la commande 
Modification/Dissocier. 



Redimensionner des objets 



Maintenant que vos deux objets sont groupes, il va etre plus simple de 
les modifier. 
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Procedez ainsi : 



Utilisez I'outil de selection ((v)) afin de selectionner votre groupe 
d' objets. 

Modifiez la taille de votre objet avec la commande 
Modification/Transformer/Redimensionner. 

Votre dessin est entoure de poignees de selection rectangulaires. 
Les poignees situees aux quatre angles redimensionnent votre 
objet proportionnellement. Les autres poignees permettent d'agir 
independamment sur l'axe horizontal ou vertical de l'objet. 

II est egalement possible de faire pi voter ou d'incliner votre objet 
avec 1'icone de rotation situee dans la section Options de la barre 
d'outils a gauche de 1'icone de redimensionnement. 

Des poignees circulaires apparaissent autour de l'objet selectionne. 
Celles qui sont placees aux angles servent a faire pivoter la 
selection. Les autres permettent d'etirer ou d'incliner votre objet. 




Figure 6.33 : Redimensionner des objets 
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Modifier les contours 

L'outil de Selection ((v)) ne permet pas seulement de selectionner des 
objets, il offre aussi la possibility de modifier ses contours : 

1 Dessinez un ovale a l'aide de l'outil Ovale ((oj). Vos formes ne 
doivent pas se toucher. 

2 Activez l'outil de selection ((V)) et placez-le dans votre rectangle. 
Selectionnez par un clic la surface coloree du rectangle et 
deplacez-la legerement en maintenant le bouton de la souris 
enfonce. 



REMARQUE 



Surface et contour 

Lors de la selection d'une forme dans Flash, seul l'interieur de votre 
rectangle est deplace, les contours restent fixes. En effet, lorsque vous 
creez un objet Flash, celui-ci distingue la surface et le contour. 



3 Pour ajouter un contour a une forme qui en est depourvue, utilisez 
l'outil Encrier ((s)).Choisissez une couleur de remplissage. 
Placez-vous au bord de votre forme et cliquez. Le contour 
apparait. 




Figure 6.34 : 

Selectionner 
formes et 
contours 



Vous pouvez selectionner le contour avec l 'outil de selection ((v)) 
et le supprimer en appuyant sur la touche (Suppr) . 

Modifiez votre ovale en placant l'outil de selection au bord de 
votre forme. Vous remarquez un arc de cercle arrondi sous la 
fleche. 
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6 Maintenez le bouton de votre souris enfonce et deplacez votre 
souris vers le haut ou vers le bas arm de modifier la forme et lui 
donner un aspect arrondi. Vous pouvez faire de meme avec votre 
contour. 




Figure 6.35 : 

Modification d'une forme 



6.5. Gerer symboles et occurrences 

A la base de toute animation se trouvent les symboles, des formes ou 
dessins realises avec Flash qui seront ensuite animes avec le logiciel. 
Ces symboles stockes dans la bibliotheque peuvent etre tres facilement 
reutilises dans 1' animation. Une fois places sur la scene principale, ils se 
nomment occurrences. 

Tout dessin destine a etre anime dans votre projet Flash doit etre 
transforme en symbole afin de pouvoir etre reutilise dans votre 
animation, a l'exception des images bitmap. 

II est possible de creer trois types de symboles dans Flash : Graphique, 
Bouton et Clip ainsi qu'un autre symbole, derive du Clip, destine aux 
applications plus complexes : le composant, qui correspond 
generalement a un symbole et a son code ActionScript, mais qui ne sera 
pas aborde dans ce chapitre. 



Creer un symbole 

1 Selectionnez la commande Insertion/Nouveau symbole ou utilisez 
le raccourci clavier [ Ctrl j +fFsl. La boite de dialogue Creer un 
symbole apparait. 
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Selectionnez le comportement de votre choix (Clip, Bouton ou 
Graphique) et validez par un clic sur le bouton OK. 

Vous entrez en mode d'edition de symbole, c'est-a-dire dans une 
fenetre independante de la fenetre principals Vous pouvez le 
verifier grace aux onglets situes en haut a gauche de votre fenetre. 



Adobe Flash CS3 Professional - [exemple.fla] 




Figure 6.36 : Creation d'un symbole Bouton 

4 Dessinez a l'aide des outils de dessin de Flash. Le symbole est 
automatiquement stocke dans la bibliotheque. 

5 Revenez sur la scene principale. Affichez le panneau Bibliotheque 
avec la commande Fenetre/Bibliotheque et inserez-y le symbole 
nouvellement cree par un glisser deplacer avec la souris. 
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Figure 6.37 : 

Insertion d'un 
symbole depuis la 
Bibliotheque 



DEFINITION 



Les diff erents types de symboles 

Flash propose la creation de trois types de symboles. Le Graphique est 
un objet non anime qui peut etre utilise au sein d' interpolations ou 
independamment en tant que decor, par exemple. Le Bouton peut 
recevoir des actions et changer d' aspect lors d'un survol ou d'un clic sur 
celui-ci. II peut egalement contenir d'autres symboles tels que boutons 
graphiques ou clips. Enfin, le Clip est le symbole le plus important. II 
peut comporter des animations independantes de la scene principale et 
possede sa propre echelle de temps. 
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Transformer un dessin en symbole 

Vous pouvez dessiner un objet sur la scene principale et decider de le 
transformer par la suite en symbole, sans passer obligatoirement par la 
fenetre d' edition de symbole. 

Pour cela : 
1 



Dessinez un objet a l'aide des outils de dessin, sur la scene 
principale. Selectionnez-le avec l'outil de selection ((V))- 

Transformez-le en symbole Graphique en appuyant la touche (£8). 

Nommez votre symbole et validez par OK. Vous pouvez 
determiner, si necessaire, ses proprietes d'alignement. 



Convertir en symbole 
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Figure 6.38 : Convertir un dessin en symbole 

4 Afin d'entrer en mode d' edition de symbole, double-cliquez sur le 
symbole depuis la scene principale. 



Stocker les symboles dans la bibliotheque 

La bibliotheque contient tous les medias qui composeront votre 
animation : images, sons, videos, bitmaps, etc. Tous les objets dessines 
dans Flash doivent etre transformed en symboles afin de pouvoir etre 
reutilises dans vos animations. 

La bibliotheque contient trois principaux types de symboles : 
Graphique, Bouton et Clip. Chaque symbole stocke dans la bibliotheque 
est associe a une icone correspondant a son comportement : 

1 Pour ouvrir la bibliotheque, utilisez le raccourci clavier fctrij+fL]. 
Si vous avez deja importe des medias ou cree des symboles, 
ceux-ci apparaissent dans la bibliotheque. Dans le cas contraire, 
elle est vide. 
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II est important d' organiser vos symboles selon leur usage dans 
1' animation. Pour vous y aider, Flash permet de creer des dossiers 
et des sous-dossiers. Selectionnez 1' icone Nouveau dossier en bas 
a gauche de la bibliotheque. 

Nommez votre dossier et faites glisser les symboles de votre 
choix a l'interieur. 
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Figure 6.39 : Organisation de la bibliotheque 



ASTUCE 



Reperer la bibliotheque de I'animation en cours 

Chaque animation possede sa propre bibliotheque. Aussi, si vous ouvrez 
plusieurs animations Flash, il est possible que la bibliotheque d'une autre 
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animation soit presente a l'ecran. La bibliotheque courante est toujours 
blanche alors que les autres bibliotheques apparaissent grisees. 



Creer une bibliotheque commune 

Une bibliotheque commune stocke des symboles communs a plusieurs 
animations. Par exemple, si vous creez un menu deroulant que vous 
souhaitez integrer a plusieurs animations Flash, au lieu d'enregistrer 
chaque animation et sa bibliotheque avec le menu deroulant, une 
bibliotheque commune stockera le menu deroulant commun a toutes les 
animations. 

Procedez ainsi : 

1 Creez une nouvelle animation Flash contenant les symboles que 
vous souhaitez voir apparaitre dans la bibliotheque commune. 

2 Placez ce fichier Flash (format auteur avec extension FLA) dans 
le dossier Bibliotheque qui se trouve dans le dossier d' installation 
du logiciel Flash, par defaut C:\Documents and Settings\nom 
d'utilisateurMocal Settings\Application Data\Adobe\Flash CS3\langue\ 
Configuration\Libraries\. 

3 Afin d'utiliser un symbole issu d'une bibliotheque commune, 
choisissez la commande Fenetre/Bibliotheques communes, 

selectionnez la bibliotheque que vous venez de creer puis faites 
glisser un symbole de la bibliotheque vers votre animation. 



REMARQUE 



Des symboles prets a I'emploi 

Flash propose par defaut trois bibliotheques communes accessibles par 
le menu Fenetre/Bibliotheques communes. Vous trouverez des 
animations, boutons, objets de formation et sons deja prets a I'emploi. 



Differencier occurrences et symboles 

Tant que vos objets sont stockes dans la bibliotheque, ils sont appeles 
symboles. Mais des que vous placez un symbole Clip ou Bouton sur la 
scene, celui-ci devient une occurrence. Cette difference de 
vocabulaire est essentielle a comprendre pour controler par la suite une 
animation avec Action Script. 
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Procedez ainsi 



Selectionnez une occurrence Clip ou Bouton sur la scene 
principale et ouvrez la fenetre Proprietes avec la commande 
Fenetre/Proprietes. 

Le champ de texte place sous le nom du symbole vous permet de 
nommer votre occurrence. Votre occurrence nouvellement 
nommee sur la scene peut etre appelee par un script. 
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Figure 6.40 : Une occurrence Bouton nommee depuis la fenetre 
Proprietes 

3 Afin de modifier une occurrence, selectionnez-la sur la scene 
principale avec l'outil Fleche de selection. 

4 Appliquez a l'occurrence des modifications de taille, de forme ou 
de couleur en vous aidant de la barre d'outils et des filtres 
disponibles dans la fenetre Proprietes. L'occurrence sur la scene 
est modifiee mais le symbole correspondant dans la bibliotheque 
reste inchange (voir Figure 6.41). 

5 Si vous souhaitez modifier un symbole, selectionnez-le dans la 
bibliotheque puis double-cliquez sur son nom afin de l'editer. 

6 Modifiez sa forme, sa taille ou sa couleur en utilisant les effets 
places dans l'inspecteur de proprietes, accessibles depuis l'onglet 
Filtres. 

7 Revenez sur la scene principale. Toutes les occurrences dependant 
de ce symbole ont ete automatiquement modifiees. . 




MTIOH 



Les proprietes de l'occurrence 



L'occurrence est une copie du symbole sur la scene et peut etre 
modifiee independamment du symbole auquel elle est rattachee. Chaque 
occurrence possede ses propres proprietes qui sont distinctes de celles du 
symbole. Vous pouvez par exemple modifier la teinte, la transparence et 
la luminosite d'une occurrence dans l'inspecteur de proprietes apres 
l'avoir selectionnee. Vous pouvez egalement incliner, faire pivoter ou 
redimensionner une occurrence sans toucher au symbole. 
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Figure 6.41 : Une occurrence et son symbole dans la bibliotheque 



6.6. Animer avec Flash 

Afin de creer des animations simples au sein de Flash, vous devrez faire 
appel a la technique de F interpolation qui consiste a laisser Flash 
calculer les images intermediaires entre deux images-cles consecutives. 
Par exemple, si vous dessinez un triangle sur une image et un losange 
sur une seconde image, Flash calculera automatiquement toutes les 
images necessaires au passage du triangle au losange. 

Cette technique s'avere bien plus appropriee au Web que la technique de 
l'animation image par image. Au lieu d'enregistrer chaque image avec 
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toutes ses informations, Flash prend en compte uniquement les valeurs 
modifiees entre l'image de debut et l'image de fin de l'animation. 



Realiser un morphing avec ^interpolation 
de forme 

L' interpolation de forme permet de transformer un objet en un autre afin 
de creer des morphings. II n'est pas necessaire de transformer vos objets 
en symboles pour creer une interpolation de forme, mais ceux-ci doivent 
se trouver sur le meme caique. 

Procedez ainsi : 

1 Dessinez un rectangle avec l'outil Rectangle ((r]) de la barre 
d'outils Dessin sur la scene dans un caique vide. Flash cree 
automatiquement une premiere image-cle sur l'image 1. 

2 Selectionnez l'image 10 du meme caique et appuyez sur la touche 
[F6] afin de creer une nouvelle image-cle. Supprimez le rectangle 
et dessinez un rond a la place avec l'outil Ovale ((oj) de la barre 
d'outils Dessin. 



ASTUCE 



Dessiner un rond parfait 

Pour dessiner un rond parfait dans Flash, activ ez T outi! Ovale ((oj) et 
dessinez sur la scene tout en maintenant la touche [Maj[ enfoncee. 



3 Dans le scenario, cliquez du bouton droit sur la zone grisee situee 
entre les deux images-cles. 

4 Selectionnez l'option Forme dans la liste deroulante Interpolation 
de la fenetre Proprietes. Les images de votre animation 
deviennent vertes et chaque image-cle est reliee par une fleche 
noire. 

5 Si vous cliquez dans le scenario sur la zone grisee situee entre les 
deux images-cles, vous pouvez visualiser l'image modifiee afin de 
realiser 1' interpolation (voir Figure 6.42). 

6 Testez l'animation en appuyant sur Ictrll +f^l. Le rectangle se 
transforme en rond. Flash a automatiquement calcule toutes les 
images intermediaires permettant la transformation du rectangle 
en rond. 
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Figure 6.42 : Creation d'une interpolation de forme 



REMARQUE 



Les reperes de forme 

Les reperes vont determiner les points que vous souhaitez garder fixes 
lors du morphing, et le placement de plusieurs points permet de 
contraindre precisement le deroulement du morphing. lis sont accessibles 
avec la commande Modification/Forme/Ajouter un repere de forme. 



Deplacer des objets avec ['interpolation 
de mouvement 

L' interpolation de mouvement offre de nombreuses possibilites 
d' animation : modification de la direction, de la taille, de la couleur, de 
la transparence d'un objet. Avant de creer une interpolation de 
mouvement, tous les objets utilises doivent avoir ete prealablement 
convertis en symboles et se trouver sur un meme caique. 
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Procedez ainsi : 



Creez un symbole Graphique avec la commande 
Insertion/Nouveau symbole et placez une occurrence sur la scene. 
Flash cree automatiquement une premiere image-cle sur 
1' image 1. 

Selectionnez 1' image 10 du meme caique et appuyez sur (£6) afin 
de creer une seconde image-cle. Deplacez votre occurrence sur la 
scene avec l'outil de selection ((V)). 

Cliquez du bouton droit entre les deux images-cles creees dans le 
scenario. Selectionnez la commande Creer interpolation de 
mouvement dans le menu contextuel. Les images de votre 
animation sont maintenant mauves et une fleche noire relie 
chaque image-cle. 



3=1 



■: 



12.0 ips 0.4s < 



Sequence 1 




Figure G.43 : Creation d'une interpolation de mouvement 

4 Testez l'animation en appuyant sur fc!ri]+f^). L'image se deplace 
sur la scene. Les images intermediaires ont ete automatiquement 
calculees par Flash. 
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REMARQUE 



Convertir une interpolation en Action Script 3 

Principale nouveaute apportee par la derniere version de Flash, la 
possibility de convertir tres facilement une interpolation en langage 
Action Script ou XML sans connaissance de la programmation. 

Pour ce faire, cliquez du bouton droit au sein du scenario sur 
1' interpolation afin de selectionner la commande Copier le mouvement en 
Action Script 3 dans le menu contextuel. L' exportation du mouvement au 
format XML se deroule dans le menu Commandes. Le code obtenu peut 
ainsi etre facilement applique a d'autres projets ou a d'autres elements de 
votre animation en utilisant la commande d' importation 



Utiliser les pelures d'oignon 

Les pelures d'oignon sont valables pour tous les types d' interpolations. 
Lorsque vous creez un objet qui se deplace, vous creez chaque 
mouvement dans une image separee. C'est l'affichage de ces images les 
unes a la suite des autres qui donne 1' impression de mouvement. 

La fonction Pelure d'oignon va afficher simultanement plusieurs images 
sur la scene, tres pratique pour visualiser la decomposition d'un 
mouvement par exemple : 

1 Creez une interpolation de mouvement sur une dizaine d' images. 
Placez-vous sur l'image-cle 1 et activez l'option Pelure d'oignon 
en cliquant sur le bouton representant deux carres superposes, en 
bas a gauche de la fenetre Scenario. 

2 Deux poignees apparaissent en haut du scenario afin de definir le 
nombre d' images a visualiser dans ce mode. Vous pouvez voir en 
transparence toutes les images intermediates situees entre les 
images-cles 5 et 10 par exemple (voir Figure 6.44). 

3 Le bouton Modifier les reperes de pelure d'oignon, place en 
derniere position en bas a droite du scenario, propose plusieurs 
options : 

_ Toujours afficher les reperes. Les reperes de pelures d'oignon 
sont affiches independamment de 1' activation du mode Pelure 
d'oignon. 

_ Ancrer la pelure d'oignon. Les reperes de pelures d'oignon ne 
peuvent se deplacer avec la tete de lecture. 
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™ mDuvement 




&l Sequence 1 



$ll*p % K 5 12.0 ips 0.3s < 




Figure G.44 : Activation des pelures d'oignon 

— Oignon 2. Affiche deux images avant et apres 1' image 
selectionnee. 

— Oignon 5. Affiche cinq images avant et apres 1' image 
selectionnee. 

— Oignon sur tout. Affiche en pelures d'oignon toutes les images 
du caique, sauf 1' image selectionnee. 

4 Pour supprimer les pelures d'oignon, appuyez de nouveau sur 
l'icone Pelure d'oignon situee en bas de la fenetre Scenario. 

Ajouter des guides de emplacement 

Le guide de deplacement est un caique special qui permet de determiner 
des trajectoires precises aux occurrences composant votre animation. 
Vous pouvez lier un caique ou plusieurs caiques a un caique de guide 
afin que plusieurs objets suivent la meme trajectoire. 
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Procedez ainsi : 



1 



Creez une interpolation de mouvement sur un caique. 
Selectionnez ce caique dans le scenario ; celui-ci apparait en 
surbrillance. 

Cliquez sur l'icone Ajouter un guide de mouvement situee en bas a 
gauche du scenario. Un nouveau caique avec un arc de cercle a sa 
gauche apparait. 

Placez le curseur sur la premiere image du caique de guide. 
Choisissez l'outil Crayon ((V)) de la barre d'outils Dessin et tracez 
une trajectoire sur le caique de guide. 

Placez-vous sur la premiere image-cle du caique contenant 
1' interpolation et deplacez votre occurrence au debut du trace avec 
la fleche de selection. Selectionnez la derniere image-cle du 
caique contenant 1' interpolation de mouvement et placez 
1' occurrence a la fin du trace. Un petit rond blanc materialise le 
point d'accrochage de votre occurrence et de votre trajectoire. 



□ 



"•; :•: 1 12.0 ips 



I Sequence 1 




Figure 6.45 : Creation d'un caique de guide 

5 Lorsque vous saisissez votre objet pour le placer sur la trajectoire, 
celui-ci se retrouve aimante vers un point du trace. 
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6 Testez votre animation en appuyant sur [ Ctrl H -f^]. L' occurrence 
suit le caique de guide sans que la trajectoire dessinee au crayon 
n'apparaisse a l'ecran. 



Masquer des objets 

Le masque est un caique special qui permet de ne rendre visible qu'une 
partie des elements de 1' animation. Le dessin que vous allez realiser sur 
le caique de masque laissera uniquement transparaitre une partie du 
caique situe juste en dessous. 

1 Selectionnez l'outil Texte ((T)) de la barre d'outils Dessin et 
ecrivez le texte de votre choix. 

2 Prolongez le nombre d' images du caique contenant le texte a 50 
images, en placant votre souris sous 1' image 50 dans le scenario et 
en appuyant sur la touche (F5) . 

3 Creez un nouveau caique en selectionnant la commande 
Insertion/Scenario/Caique. Nommez-le Rond. Selectionnez la 
premiere image-cle de ce caique et dessinez un rond avec l'outil 
Ovale ((R)). 

4 Selectionnez cette forme avec la fleche de selection et 
transformez-la en symbole Graphique en appuyant sur (F8) . 

5 Placez cette occurrence a gauche du texte sur la premiere image- 
cle du caique rond. Creez une nouvelle image-cle a l'image 50 
du caique rond en appuyant sur la touche [F6] , 

6 Placez le rond a droite du texte. Selectionnez la zone grise situee 
entre les deux images-cles du caique rond. 

7 Cliquez du bouton droit et creez une interpolation de mouvement 
selectionnant la commande Creer une interpolation de 
mouvement dans le menu contextuel. 
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Transformez le caique rond en caique de masque. Selectionnez le 

caique puis cliquez du bouton droit. Dans le menu contextuel, 

choisissez la commande Masque. 

Le caique rond masque desormais en partie le caique texte. 

Remarquez le changement d'icone devant le nom des caiques 

dans le scenario. Les deux caiques sont automatiquement 

verrouilles. 




texte • A □ • 

, 

Figure 6.47 : Ajout d'un masque anime 

10 Testez votre animation en appuyant sur fctrfH-f^]. Le masque se 
deplace sur votre texte afin de le devoiler au fur et a mesure. 



6.7. Inserer des elements multimedias 

Flash est un logiciel d' animation qui permet d' importer et d'optimiser 
video et son pour votre page web. 

Inserer une video dans une animation Flash 

La plupart des fichiers video standard, tels que les formats MPEG, MOV 
(QuickTime), AVI, WMV, ASF ou DV (video numerique) sont supported 
par Flash, a condition de posseder la derniere version de Quick Time ou 
de Direct X sur votre ordinateur. 

Les videos sont lues en streaming mais elles peuvent egalement prendre 
les proprietes de n'importe quel objet si elles ont ete inserees dans un 
clip, afin de pouvoir modifier leur taille, leur position ou de les rendre 
interactives grace au langage Action Script. 

1 Selectionnez la commande Fichier/lmporter/lmporter de la video. 
La fenetre Importer de la video s'affiche a l'ecran. 

2 Avec le bouton Parcourir, selectionnez un fichier video sur votre 
ordinateur. Cliquez sur le bouton Suivant. 
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Dans la section Deploiement, cochez l' option Incorporer la video 
dans SWF et la diffuser dans le scenario. Cliquez sur le bouton 
Suivant. Cette option est destinee a integrer de petits clips. Pour 
des clips plus longs avec piste audio, privilegiez le 
telechargement progressif a partir d'un serveur web. 



Quick Time ou Flash 

Vous pouvez visualiser une video importee dans Flash directement 
dans le fichier de l'animation finale au format SWF ou choisir de publier 
une animation avec de la video au format QuickTime (extension MOV). 

Le player Flash etant maintenant integre par defaut aux dernieres versions 
des navigateurs Internet, il est conseille de privilegier le format SWF au 
format Quick Time, ce dernier necessitant le telechargement du plug-in 
dedie. 



Dans la section Incorporation, selectionnez Clip dans la liste 
deroulante Type de symbole et Integree dans la liste deroulante 
Piste Audio afin de conserver la piste son. Conservez les autres 
options par defaut et cliquez sur le bouton Suivant. 

Dans la section Codage, conservez Flash 8 - Qualite moyenne. La 
video ne pourra etre lue qu'avec le player Flash 8 et la qualite 
moyenne constitue un bon compromis poids/qualite pour une 
publication sur le Web. 
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Cliquez sur le bouton Suivant. Un recapitulatif des informations 
entrees dans 1' Assistant d'importation video s'affiche a Fecran. 
Validez par un clic sur le bouton Termine. 

La video est integree dans la scene principale de Flash. Vous 
pouvez ajuster la taille de la scene ainsi que sa couleur avec la 
commande Modification/Documents. Pour aj outer un cadre a la 
video, utilisez les outils de dessin. 

Testez 1' animation avec la combinaison de touches fCfrO+f* =r l La 
video est lue en boucle dans 1' animation Flash. Elle peut etre 
controlee comme n'importe quel symbole Clip insere dans une 
animation Flash 



Afin de controler la video plus precisement pour arreter 
V animation sur une image precise ou ajouter des eff'ets 
speciaux, vous devrezfaire appel a V Action Script, detaille 
dans la section Introduction a I' Action Script de ce chapitre. 




Figure 6.49 : Apercu de la video dans le Player Flash 
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Ajouter une musique de fond 

Dans une animation Flash, le son peut etre ou non synchronise avec les 
images de l'animation. II est possible de le lire en continu grace au 
streaming, ou de placer dans votre animation des sons qui serviront de 
bruitages. 

II n'est pas possible d'enregistrer des sons dans Flash. En revanche, 
vous pouvez importer des fichiers son afin de les utiliser dans vos 
projets. Les principaux formats de son sont supported par Flash : 

MP3 (Windows ou Macintosh) ; 

WAV (Windows uniquement) ; 

AIFF (Compact Disc Audio - Macintosh uniquement). 

Procedez ainsi : 

1 Pour importer un son, selectionnez la commande 
Fichier/lmporter/lmporter dans la bibliotheque. La boite de 
dialogue Importer apparait. Selectionnez un fichier son sur votre 
disque puis validez par un clic sur le bouton Ouvrir. 



Quel format privilegier 

Le poids de vos fichiers son peut alourdir considerablement 
l'animation : 

Un son 16 bits offre une qualite de son superieure a un son 8 bits, 

mais son poids passe generalement du simple au double. 

Un son stereo occupe deux fois plus d'espace memoire qu'un son 

mono. 

Le format MP3 offre a qualite egale une compression superieure a 

celle des formats WAV ou AIFF ; c'est le format le plus utilise sur le 

Web. 



Le fichier son est place automatiquement dans la Bibliotheque 

(fctfJ]+fT)). Depuis la bibliotheque, un son peut etre lu dans la 
fenetre d' apercu a l'aide des boutons places en haut a droite (voir 
Figure 6.50). 

Le fichier son se comporte comme n'importe quel element de la 
bibliotheque ; cela signifie que placer plusieurs occurrences d'un 
meme fichier son n'alourdira pas l'animation. Afin de placer un 
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son qui sera lu tout au long de 1' animation, creez un nouveau 
caique sur la scene avec la commande Insertion/Scenario/Caique. 
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Figure 6.50 : 

Apercu d'un son 
imports- dans la 
bibliotheque 

Etendez la duree de V animation a la duree souhaitee pour votre 
son. Par exemple, si vous souhaitez que la musique soit jouee 
pendant les 50 premieres images, cliquez sur l'image 50 dans le 
scenario et appuyez sur la touche [Pp . 

Selectionnez le son emporte dans la bibliotheque et choisissez 
Continu dans la liste deroulante Sync de la fenetre Proprietes. 
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6 Testez 1' animation en appuyant sur la combinaison de touches 
I.Ctrl r H+^1. Le son est joue pendant la duree specifiee dans le 
scenario. 



6.8. Introduction a I'Action Script 

ActionScript est le langage de programmation utilise dans Flash. II 
permet de donner des ordres simples aux animations comme jouer ou 
stopper sur une image precise mais aussi de faire dialoguer entre eux 
plusieurs elements multimedias (videos, sons, etc.). 

Action Script est a base d' actions, qui peuvent se derouler pendant 
1' animation, lors du passage de la tete de lecture sur une image 
specifique ou suite a une action de l'utilisateur, par un clic de souris ou 
une pression sur une touche du clavier. Arm d' avoir un premier apercu 
des possibilites d' Action Script, plusieurs exemples concrets vont etre 
detailles dans cette section. 



Les bases d 'Action Script 

Dans tout langage de programmation, il est indispensable de respecter 
certaines regies precises afin que tous vos scripts fonctionnement 
correctement. Avant de debuter avec Action Script, il est important de 
comprendre le mode de fonctionnement d'un script et de saisir les mots dans 
le bon ordre, afin d'ecrire un "code propre" et comprehensible par tous. 

Par exemple, si vous dites en frangais : "Peux-tu m'apporter la pomme 
qui est dans le saladier ?", vous serez parfaitement compris. Mais si 
vous utilisez la phrase suivante : "toi apporter pomme dans saladier", 
vous serez egalement compris. Le resultat sera le meme, meme si la 
seconde phrase contient uniquement les termes strictement 
indispensables. 

Action Script 1.0, 2.0 ou 3.0 ? 

La derniere version d' Action Script proposee dans Flash CS3, nominee 
Action Script 3.0, est particulierement puissante et s'adresse desormais 
aux developpeurs experimentes souhaitant realiser des applications 
complexes avec Flash. Quelle que soit la version utilisee, la creation 
d'interactivite se deroule au sein de la fenetre Action qui permet aussi 
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bien de programmer avec la version 1.0, 2.0 ou 3.0, meme si les 
versions 2.0 et 3.0 sont a privilegier. 

Les anciennes versions d' Action Script (1.0 et 2.0) sont plus accessibles 
aux non programmeurs et sont toujours supportees par Flash. Si vous 
souhaitez ajouter ponctuellement quelques interactions a vos animations, 
du type jouer ou arreter une animation, creer des interactions de bouton 
simple, I' Action Script version 1.0 et 2.0 s'avereront parfaitement 
suffisantes. 

Dans le cas contraire, le passage a l'Action Script 3.0, base sur les 
classes comme de nombreux autres langages de programmation, 
s'imposera a vous, mais cela necessite de posseder des bases solides en 
developpement. 

Nous abordons dans ce chapitre la programmation en Action Script 2.0 
et 3.0. 

Principe de fonctionnement 

Toutes les versions d'ActionScript utilisent une syntaxe pointee pour 
definir les proprietes d'un objet. Seuls les mots les plus significatifs sont 
presents. 

Si vous souhaitez declencher une action avec ActionScript arm 
d'appliquer une rotation de 90 degres a l'occurrence objet, la syntaxe 
utilisee sera la suivante : 

objet . rotation = 90; 

La syntaxe pointee decompose done chaque script en differentes parties 
separees par des points. La propriete rotation est appliquee a 
l'occurrence objet, qui correspond a un exemplaire d'un symbole Clip 
ou Bouton stocke dans la bibliotheque et place sur la scene. 

Avant de commencer a programmer avec Action Script, il est necessaire 
d'expliciter quelques termes de vocabulaire indispensables pour debuter. 



Les proprietes 



Les proprietes Action Script sont des attributs qui se rapportent a un 
objet. Ces attributs peuvent par exemple modifier la taille, la couleur, la 
transparence, la position sur la scene d'une occurrence de facon 
dynamique. 
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Procedez ainsi : 

1 Voici un exemple de proprietes affectees a l'occurrence ballon : 

ballon. alpha = 50; 
ballon. x = 200; 
ballon. visible = false; 

Afin de visualiser le resultat de ces proprietes dans Flash, il est 
necessaire de tester chaque ligne d' instruction separement les unes des 
autres. 

2 Le code peut etre decompose de la maniere suivante : 

— Ballon correspond au nom d'une occurrence sur la scene ; 
plusieurs proprietes ont ete affectees a cette occurrence. 

— alpha determine le degre d'opacite ou de transparence de 
l'occurrence. 

— x determine la position horizontale de 1' occurrence (sur l'axe 
des x). 

— visible determine si l'occurrence est visible ou non sur la 
scene : deux valeurs sont possibles, soit True (1' objet est 
visible), soit False (l'objet est invisible). 

La presence des points-virgules en fin de ligne est necessaire a une 
bonne interpretation du code par Flash. 



Les fonctions 

Les fonctions correspondent a un mot ou groupe de mots destines a 
executer plusieurs instructions, e'est-a-dire donner plusieurs "ordres" a 
votre animation Flash. Vous pouvez creer vos propres fonctions ou 
utiliser des fonctions deja existantes dans Flash : 

1 Voici deux exemples de fonctions : 

Function jouerleson () ; 
stop ( ) ; 

2 La premiere fonction Jouerleson () est une fonction creee par 
l'utilisateur ; il s'agit d'une utilisation plus avancee de l'Action 
Script qui ne sera pas abordee dans cet ouvrage tandis que 
stop () est une fonction deja existante dans Flash permettant de 
stopper une animation sur une image precise. 



LE GUIDE CDMPLET 



283 



Chapitre 6 



Creer des animations pour le Web avec Flash 



Les commentaires 

Tous vos codes peuvent egalement etre precedes d'un commentaire. 
C'est une habitude a prendre des lors que vous ne travaillez pas seul sur 
un script. Cela vous sera toujours utile si vous souhaitez revenir plus 
tard sur un code sans etre perdu. 

Plusieurs possibilites sont a votre disposition : 

Si vous souhaitez placer une a deux lignes de commentaires, les 
slashs sont suffisants : 

// L' occurrence est invisible 
image .visible = false; 

Si vous souhaitez placer plusieurs lignes de commentaires, il est 
conseille de debuter la ligne de commentaires par */ puis d'ecrire 
vos commentaires et de terminer la derniere ligne par * / : 

*/ L' occurrence image est invisible 
A la fin de 1' animation */ 

Utiliser la fenetre Actions 

Une suite de lignes ecrite en Action Script se nomme un "script". Tout 
script Action Script s'insere dans 1' animation avec la fenetre Actions de 
Flash. 

Procedez ainsi : 

1 Arm d'ouvrir la fenetre Actions, deux possibilites s'offrent a 
vous. Vous pouvez utiliser le raccourci clavier (£9) ou selectionnez 
la commande Fenetre/Actions. 

2 Selon 1' element selectionne, images ou symboles, votre palette 
s'intitule Actions - Image ou Actions. En effet, il est 
possible en Action Script 2.0 de placer du code a plusieurs 
endroits d'une animation (image, bouton, clip...). 

3 La fenetre Actions est divisee en trois parties. La colonne de 
gauche, appelee liste de zone d'outils, contient toutes les 
actions disponibles. Double-cliquer sur l'une de ces actions la fait 
apparaitre dans la colonne de droite. 
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I Aide I Actions - image 



ActionScript 3.0 
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Figure 6.51 : La fenetre Actions d'image 

Vous pouvez egalement acceder a toutes les actions disponibles et 
a leurs raccourcis clavier correspondant grace au bouton + situe 
en haut a gauche de la fenetre Actions. Lorsqu'une action 
comprend plusieurs parametres, la partie haute vous permet de les 
determiner. 

Lorsque vous serez familiarise avec I'Action Script, vous pourrez 
inserer plus rapidement des actions en utilisant les raccourcis 
clavier car chaque action possede sa propre combinaison de 
touches. Pour ecrire rapidement Taction gotoAndPlay, placez le 
curseur dans la zone blanche de saisie, appuyez sur la touche 
|Echap) , relachez, puis appuyez sur les lettres [g] et (F). L' action 
gotoAndPlay apparait a l'ecran avec les parentheses necessaires 
et le " ; " en fin de ligne. 



REMARQUE 



Gagner du temps avec Action Script 

Tous les raccourcis clavier sont accessibles en cliquant sur le bouton + 
de la fenetre Actions. II n'existe malheureusement aucun raccourci pour 
les proprietes d' occurrence que vous devrez selectionner dans la liste au 
sein de la fenetre d' actions ou entrer manuellement. 
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Afin de vous aider a entrer correctement les parametres 
necessaires, l'aide intuitive est presente a chaque saisie. Pour 
davantage d' informations sur la facon d'utiliser une action 
specifique, selectionnez-la afin qu'elle apparaisse en surbrillance 
puis cliquez sur l'icone d' Assistant de script situe dans Tangle 
superieur droit de la fenetre Actions. 



! Aide | Actions - Image x M 
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ligne 2 : gotoAndPlay(2S); 



Figure 6.52 : L'aide intuitive de la fenetre Actions 

Lors de vos premiers pas avec Action Script, il est necessaire de 
verifier frequemment que votre script ne contient pas d'erreur. 
Placez votre curseur dans la zone d' insertion d' actions puis 
utilisez le raccourci clavier |Ctrl) +fT]. La fenetre Sortie indique vos 
erreurs potentielles et leur emplacement afin de les corriger plus 
rapidement. 



Ou placer votre script ? 

Contrairement a des langages tels que le HTML ou Javascript qui se 
placent systematiquement dans une page web, le code Action Script 2.0 
peut etre place a de multiples endroits dans Flash, selon l'interactivite et 
le resultat que vous souhaitez obtenir dans votre animation. 

Lors de la realisation d'une animation Flash dans laquelle vous souhaitez 
creer de l'interactivite, il est indispensable que vous repondiez aux 
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questions "Quoi " et "Quand", c'est-a-dire quel resultat souhaitez-vous 
obtenir ? Et surtout a quel moment de 1' animation doit-il se produire ? 

Pour vous aider a definir le meilleur emplacement pour votre code au 
sein d'animations simples, voici quelques indications : 

Si vous souhaitez qu'une action se declenche au cours de 
l'animation, sans intervention de l'utilisateur, il s'agira d'une 
action d' image, placee dans l'echelle de temps de la scene 
principale ou dans l'echelle de temps du clip. Par exemple, pour 
lancer automatiquement une musique a un moment precis de 
l'animation, vous ferez appel a une action d' image. 

Si vous souhaitez creer de l'interactivite avec vos utilisateurs en 
leur proposant de declencher une action, par un clic de souris ou 
le survol d'une zone de l'animation par exemple, celles-ci devront 
etre placees sur une occurrence Clip ou Bouton placee au sein de 
l'animation. 

Au sein d'animations plus complexes, du code Action Script sera 
place aussi bien sur des images que sur des occurrences Clip, 
Bouton ou Graphique afin de multiplier les possibilites 
d'interactivite. 



Placer du code Action Script sur une image 

Dans Flash, il est possible de placer autant d' actions que vous le 
souhaitez sur les images de la scene principale, mais aussi au sein de 
l'echelle de temps d'un Clip, car ce type de symbole possede son propre 
scenario. Les actions inserees dans Flash sont lancees au fur et a mesure 
de leur ordre d' apparition dans l'echelle de temps. 

1 Par exemple, pour eviter qu'une animation ne tourne indefiniment 
en boucle, il est generalement indispensable de la stopper a la 
derniere image. Pour ce faire, creez une image-cle sur la derniere 
image de votre animation en appuyant sur la touche [F6] . 




Actions d'image et image-cle 

Afin de placer une action sur une image, vous devez necessairement 
selectionner une image-cle. Dans le cas contraire, un message d'erreur 
s'affichera. 
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Appuyez sur la touche (fD ; la fenetre Actions - Image apparait. 
Prenez 1' habitude de toujours verifier 1' intitule de votre fenetre 
d'actions lors de l'insertion de scripts afin d'eviter les erreurs de 
placement. 

Saisissez le code Action Script permettant de stopper 1' animation. 
II s'agit de Taction 

StopO ; 

Vous pouvez inserer cette action de deux f aeons : 

— Double-cliquez sur Taction Stop situee dans la categorie 
Fonctions globales/Controle du scenario. Celle-ci s'affiche 
automatiquement dans la zone d'actions. 

_ Entrez manuellement Taction a Taide de son raccourci clavier. 
Appuyez sur la touche [Echapl , relachez la touche puis appuyez 
successivement sur les touches (s) et (T). 



ATTENTION 



N'oubliez pas les points-virgules 

Si vous entrez manuellement une action au sein d' Action Script, 
n'oubliez pas les points-virgules necessaires au bon fonctionnement de 
votre script. 



4 Lorsque votre action est inseree, un petit a se place juste 
au-dessus de Timage-cle dans Techelle de temps. 



Figure G.53 : 

Insertion d'une action d'image 




Un script d' images ne contient jamais de gestionnaires 
d'evenements (un clic de souris est un gestionnaire d'evenement 
par exemple) mais une (des) instruction(s) ou une (des) 
fonction(s). Votre script se declenchera obligatoirement lors du 
passage de la tete de lecture sur T image contenant Taction. 



Les principales actions d'image 

Parmi les actions les plus courantes sur une image, notez celles liees 
au controle du scenario, situees dans la categorie Controle du scenario 
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au sein de la fenetre Actions - Image. Afin de vous familiariser avec 
chaque action, n'hesitez pas a les placer au sein de vos animations 
puis a les tester dans le Flash Player. 



Placer du code Action Script sur un bouton 

En Action Script 2.0, les gestionnaires d'evenements, utilises 
notamment pour declencher une action suite a un clic de souris, se 
placent sur un symbole Bouton. 

1 Selectionnez une occurrence Bouton sur la scene a Taide de Toutil 
de selection ((V))- 

2 Ouvrez la fenetre Actions en appuyant sur la touche (re). 

3 Saisissez votre code. Le code doit commencer par un gestionnaire 
d'evenements du type : 

On (event) { 
instructions; 

4 Ainsi, pour stopper T animation et vous rendre a T image 10 d'un 
clip nomme quizz lors d'un clic sur un bouton, vous insererez le 
code suivant : 

on (press) { 

qui z z . got oAndS top (10) ; 
} 

Le principe est similaire, quel que soit le gestionnaire d'evenement 
insere sur le bouton. 



▼ Actions - Bouton 




ActionScript 1.0 & 2 X) 
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Figure 6.54 : 

Insertion d'une action 
sur un bouton 
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REMARQUE 



Lancer une action en appuyant sur une touche de clavier 



Les gestionnaires d'evenement ne permettent pas uniquement de 
controler la souris. lis offrent egalement la possibility de declencher une 
action precise en appuyant sur une touche du clavier. 



Tableau 6.1 : Les principaux gestionnaires d'evenement en Action Script 2.0 


Evenement 


Declenchement de Taction 


on (Press) 


Lors d'un die de souris sur le bouton 


on (Release) 

on (Release Outside) 


Lors du relachement de la souris sur le bouton 

Lors du relachement de la souris en dehors du 
bouton 


on (RollOver) 


Lors du survol de la souris sur le bouton 


on (RollOut) 


Apres relachement de la souris en dehors de la 
zone du bouton 


on (DragOver) 
on (DragOut) 


Apres un die sur le bouton tout en le faisant 
glisser 

Relachement du die en dehors du bouton apres 
I'avoir fait glisser 


on (KeyPress) Lors de la pression d'une touche sur le clavier 


on ((keyPress 
"<Backspace>") 


Lors d'une pression sur la iBarred'espace] 



5 Le code suivant est une variante en Action Script 3.0 qui rend 
cliquable l'occurrence quizz, qu'il s'agisse d'un bouton ou d'un 
clip : 

quizz . addEventListener (MouseEvent . CLICK) 

D'autres evenement peuvent egalement etre utilises tels que 
MOUSE_DOWN (curseur de la souris abaisse), mouse_over (survol 
de la souris) ou double_click. 

Placer du code Action Script sur un Clip 

Le clip possede son propre scenario et son echelle de temps. A ce titre, 
il est possible de placer du code Action Script 2.0 sur I'echelle de temps 
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d'un clip grace aux actions d'image, mais l'occurrence Clip peut 
egalement contenir son propre code. 

Selectionnez une occurrence Clip sur la scene a l'aide de l'outil de 
selection ((V))- 

Ouvrez la fenetre Actions avec la commande Fenetre/Actions. La 
fenetre Actions - Clip apparait. 

Saisissez votre code sur le modele suivant : 



On ClipEvent 
instruction; 
} 



(event) { 



4 Afin de jouer l'animation a partir de l'image 10 de la scene 
principale lors du survol de la souris sur un clip situe dans la 
scene principale, vous utiliserez le code suivant : 

onClipEvent (mouseMove) { 
gotoAndStop(lO) ; 













▼ Actions - Clip 
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Figure G.55 : Insertion d'une action sur un Clip 



Tableau 6.2 : Les principaux evenements rattaches aux clips 
en Action Script 2.0 

Declenchement de Taction 



Evenement 

onClipEvent 
(enterFrame] 



onClipEvent [Load] 



Lors du passage de la tete de lecture sur 
I'image-cle dans laquelle le clip a ete insere 

Des le chargement du clip 
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Tableau 6.2 : Les principaux evenements rattaches aux clips 
en Action Script 2.0 



Evenement 

onClipEvent (Unload) 



onClipEvent 
[MouseMove] 

onClipEvent 
[MouseDown) 

onClipEvent [MouseUp] 

onClipEvent (KeyDown) 

onClipEvent [KeyUp] 



Declenchement de ['action 

Apres passage de la tete de lecture sur I'image- 
cle dans laquelle le clip a ete insere 

A chaque mouvement de souris 



Apres die de souris sur le Clip 

Apres relachement de la souris sur le Clip 
Apres pression d'une touche au clavier 
Apres avoir relache une touche du clavier 



Controler les proprieties d'occurrence 
avec Action Script 

Les proprietes d'occurrence permettent de modifier dynamiquement 
l'apparence d'une occurrence. Quelle que soit la version d' Action Script 
utilisee, la syntaxe est la suivante : 

nonoccurrence. propriete = valeur. 

Pour davantage d' informations sur les proprietes disponibles, consultez 
l'aide de Flash en appuyant sur la touche (fT). 

Modifier les dimensions d'une occurrence 

Les proprietes width et height permettent respectivement de modifier 
la largeur et la hauteur en pixels d'une occurrence : 

1 Dessinez la forme de votre choix avec les outils de dessin ou 
importez une image avec la commande Fichier/lmporter. 
Selectionnez votre objet et transformez-le en symbole Clip ((f8J). 

2 Nommez son occurrence objet dans l'inspecteur de proprietes. 
II est indispensable de nommer une occurrence pour la controler 
avec Action Script. 

3 Placez le curseur sur la premiere image du scenario et ouvrez la 
fenetre Actions avec la touche (£9). La fenetre Actions - Image 
apparait. Entrez le code suivant : 
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objet. width = 100; 
objet. height = 200 



Actions - Image x L 



ActionScript 3.0 



Niveau superieur 

^J ArgumentError 

HO Methodes 



A 



{sb jet. width = 200; 
objet. height = 400; 




Figure 6.56 : Modification des proprietes de taille d'une occurrence 

4 Testez l'animation avec la combinaison de touches | Ctrl l +f^l- Au 
lancement de l'animation, les proprietes de largeur et de hauteur 
definies avec Action Script seront automatiquement attributes a 
1' occurrence objet. 



Modifier les proportions d'une occurrence 

Si vous souhaitez modifier les proportions d'une occurrence, vous 
devrez faire appel a la propriete xscale, qui permet de modifier les 
proportions en largeur de 1' occurrence et y scale, utilisee pour modifier 
les proportions en hauteur de 1' occurrence. 

1 Selectionnez 1' occurrence objet situee sur la scene principale et 
supprimez le code precedent. Ouvrez la fenetre Actions - Image 
(fF9p. Placez ce code sur la premiere image de l'animation. 

objet. xscale = 200; 

2 Testez l'animation avec la combinaison de touches [Ctrll +f^]. La 
propriete xscale augmente la largeur de votre occurrence en 
adaptant proportionnellement sa hauteur. 



Fonctions globales 
pj Console du scenario 
® gotoAndPlay 
® gotoAndStop 




Figure 6.57 : Modification des proportions d'une occurrence 
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Modifier la transparence d'une occurrence 

La propriete alpha permet de modifier dynamiquement l'opacite d'une 
occurrence, afin de la rendre plus ou moins transparente ou totalement 
opaque. 

1 Choisissez l'occurrence objet et placez votre curseur sur la 
premiere image-cle de 1' animation. 

2 Ouvrez la fenetre Actions - Image ([?9|). Inserez le code suivant : 
objet. alpha = 20; 

3 La propriete alpha peut prendre une valeur de a 100 : 

_ Si la valeur est egale a 0, l'occurrence sera totalement invisible 

sur la scene. 
_ Si la valeur est egale a 100, l'occurrence sera totalement 

visible sur la scene. 



Actions - Im< 
ActionScript 3.0 



Niveau superieur 

j§] ArgumentError 

fl) Methodes 



II 



«fe fi O v I <&&„ ft o V •£> CP 1 

ob jet. alpha = 20;| 



Figure G.58 : Modification des proprietes de transparence 



REMARQUE 



Definir la valeur alpha depuis I'inspecteur de proprietes 

La propriete alpha peut egalement etre modifiee au sein de 
I'inspecteur de proprietes. Apres vous etre assure que votre objet a ete 
transforme en symbole, activez la fenetre Proprietes puis selectionnez 
1' option Alpha dans la liste deroulante Couleur. Choisissez une valeur de 
a 100. Les modifications sont immediatement repercutees dans la scene 
principale. 



4 Testez 1' animation avec la combinaison de touches (CtrO+0- 
Votre occurrence est quasi-invisible. Afin d'augmenter son 
opacite, vous devrez egalement augmenter la valeur _alpha 
definie sur la premiere image-cle de 1' animation. 
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REMARQUE 



La chasse aux kilooctets 



La propriete alpha est particulierement gourmande en ressources 
memoire et risque de ralentir fortement le deroulement de votre 
animation. Utilisez de preference les changements de teinte ou la 
propriete visible abordee plus loin dans ce chapitre si vous souhaitez 
rendre une occurrence totalement invisible plutot que de definir sa 
propriete alpha a zero. 



Modifier la position d'une occurrence 

Deux proprietes permettent de determiner dynamiquement la position 
d'une occurrence sur la scene. La propriete x determine la position 
horizontal de l'occurrence et la propriete _y determine la position 
verticale de l'occurrence. 

1 Selectionnez 1 'occurrence objet et ouvrez la fenetre Actions - 
Image ((f9)). 

2 Sur la premiere image-cle du scenario, inserez le code suivant : 

objet. x = 200; 
objet. y = 350; 













' 






j ActionScript 3.0 


1 objet. x = 200; 
■ objet. y = 350; 

B ■ 






||lJ Niveau superieur 
||D ArgumentError 





Figure 6.59 : 

Positionnement 
dynamique 
d'une 
occurrence 



Ce code va placer l'occurrence objet a 200 pixels pour la position 
horizontale et 350 pixels pour la position verticale. Par defaut, Tangle 
gauche de la scene est note (0,0). 

3 Testez 1' animation dans le Flash Player avec la combinaison de 
touches [Ctrll +f^]. L'occurrence se place automatiquement aux 
coordonnees indiquees. 

Modifier la position d'une occurrence avec un bouton 

Afin de modifier les proprietes d'une occurrence lors d'un clic sur un 
bouton, il sufflt de placer les changements de proprietes dans un 
gestionnaire d'evenement. 
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Conservez l'occurrence objet sur la scene principale. Dessinez 
une nouvelle forme sur la scene. Selectionnez-la avec l'outil de 
selection ((v)). Appuyez sur la touche (F8) et choisissez le 
comportement Bouton. Validez par un clic sur le bouton OK. 

Assurez-vous que le bouton est toujours selectionne et ouvrez la 
fenetre Actions - Bouton avec la touche (W). Placez le code 
suivant (Action Script 2.0) : 

on (press) { 
objet.x = 200; 
objet. y = 100; 
} 

Lors d'un clic sur le bouton, la position en x et en y de 
l'occurrence objet sera modiflee sur la scene Votre occurrence 
sera positionnee a 200 pixels en haut a gauche de la scene et a 
100 pixels de haut. 



_ 



▼ Actions - Bouton 

ActionScript 1.0 & 2.0 




j FoncUons globales 
[J^j Conlrole du scenario 
® gotoAndPlay 
® gotoAndStop 
® nextFrame 
(*) nextScene 

Figure 6. GO : Modification des proprietes lors d'un clic sur un bouton 



Masquer dynamiquement une occurrence 

La propriete visible permet de rendre une occurrence visible ou 
invisible sur la scene. Elle prend deux valeurs possibles, true ou false (1 
ouO). 

1 Selectionnez l'occurrence objet sur la scene avec l'outil de 
selection ((v)). Placez le code suivant sur la premiere image-cle du 
scenario : 

objet .visible = false; 
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Ce code rend l'occurrence objet invisible sur la scene. Vous 
pouvez egalement utiliser le code suivant arm d'obtenir le meme 
resultat : 

objet .visible = 0; 

Inversement, si vous souhaitez rendre visible une occurrence sur 
la scene, apres avoir abaisse sa transparence par exemple ou 
1' avoir prealablement definie comme invisible, vous utiliserez le 
code suivant : 

objet .visible = true; 

Vous pouvez egalement utiliser le code suivant : 

objet .visible = 1; 



REMARQUE 



Bouton invisible 



Une occurrence bouton specifiee comme invisible ne sera pas 
cliquable, tandis qu'une occurrence bouton dont la propriete alpha a ete 
reglee a sera invisible mais restera cliquable sur la scene. 



Ajouter des liens dans vos animations 

Afin d'inserer des liens au sein de votre animation, il est indispensable 
de faire appel a des fonctions Action Script, placees sur un symbole ou 
un texte recouvert d'un bouton transparent. 

Inserer un lien depuis une animation Flash 

Comme dans n'importe quelle page HTML, il est souvent necessaire 
d'inserer au sein de vos animations Flash un lien vers une page web ou 
une adresse mail. Vous pouvez inserer un lien sur du texte mais aussi 
placer un lien sur bouton dessine avec Flash, comme nous allons le 
decouvrir dans cette section. 

1 Dessinez une forme a 1'aide des outils de dessin au sein de la 
scene principale. Selectionnez-la avec l'outil de selection ((V)) 
puis appuyez sur la touche (?8). Choisissez le comportement 
Bouton et validez par un clic sur le bouton OK. 

2 Assurez-vous que le bouton est selectionne puis ouvrez la fenetre 
Actions ([F9]). Inserez le code suivant en Action Script 2.0 : 

on press { 
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getUrl ("http://www.microapp.com") ; 

} 

Lors d'un clic de souris, Faction getUrl s' applique afin de creer un lien 
vers le site web de Micro Application. 



Deceuvrez le site de Micro Application 



3* js> e v i (f 80 



1 on press { 

2 getUrl ("http://www.rnicroapp.com", "blank"); 

3 } 

4 



Figure 6. 61 : Ouverture d'une page web depuis Flash 

3 Si vous souhaitez enrichir ce code afin que votre lien s'ouvre dans 
une nouvelle page web, inserez le code suivant : 

on press { 

getUrl ("http://www.microapp.com", "__blank"); 



Un argument a simplement ete ajoute par rapport au code precedent afin 
de specifier dans quelle fenetre le lien doit s'ouvrir. Vous pouvez 
indiquer pour cible le nom d'un cadre ou les noms reserves suivants : 

_self. La page Internet s'ouvre dans la fenetre en cours. 

.blank. La page Internet s'ouvre dans une nouvelle fenetre. 

_parent. La page Internet s'ouvre dans la fenetre ouverte juste 
avant la fenetre en cours. 

_top. La page Internet s'ouvre dans la fenetre ou se trouvait 
definie la structure du cadre, ce qui la detruit automatiquement. 

4 Afin d'inserer un lien vers une adresse mail, le principe reste le 
meme que precedemment sauf qu'au lieu de placer une adresse 
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Internet entre guillemets, vous devez indiquer une adresse mail 
precedee de "mailto:". Ainsi, pour ouvrir la messagerie de 
l'utilisateur lors d'un clic sur un bouton, vous placerez le code 
suivant sur celui-ci : 



on press { 
getUrl ("mailto 
} 



webmaster@microapp.com") ; 



Ouvrir une pop up depuis une animation Flash 

Les fenetres pop up sont des fenetres qui s'ouvrent au sein de votre 
navigateur sans barre d'outils ni boutons de navigation, tres souvent 
utilisees a des fins publicitaires. Afin d' ouvrir une pop up depuis une 
animation Flash, il est necessaire de faire appel a une petite fonction 
JavaScript couplee a I'Action Script. 

1 Creez une nouvelle page HTML et inserez le code suivant entre 
les balises <Head> et </Head>. Si vous utilisez Dreamweaver, 
activez le mode Fractionner afin d'inserer le code : 



<HEAD> 

<SCRIPT LANGUAGE="JavaScript"> 

function pop() 

{ 

window . open ( ' monf ichier 

.html' , 'mafenetre' , ' toolbar=0, Iocation=0,directories=0, 

S< status=0, scrollbars=0, resizable=0, copyhistory=0, 

*< menuBar=0, width=214, height=150' ) ; 

} 

</SCRIPT> 

</HEAD> 



S u Pour davantage d' informations sur la creation de page web 
renvoi avec Dreamweaver, reportez-vous au chapitre 4, Alter plus loin 
avec Dreamweaver. 

— La balise <script LANGUAGE="JavaScript"> indique que 
vous allez ecrire un script Javascript. 

— La fonction pop ( ) va contenir tous les parametres de la pop up 
(taille, barre de statut affichee ou non, etc.) ainsi que le nom de la 
page a ouvrir. Dans cet exemple, il s'agit de la page 
monfichier.html. 
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2 Ouvrez votre animation Flash. Creez un symbole Bouton puis 
inserez le code suivant en Action Script 2.0 sur le bouton dans la 
fenetre Actions ((F9)) : 

on (press) { 

getURL (" Javascript : pop ()") ; 

} 

La fonction getUrl()est utilisee pour appeler la fonction 
JavaScript. L' argument entre parentheses precise le langage et le 
nom de la fonction appelee, la meme que dans la page HTML. 



ActionScript 1.0 & 2.0 



v.k^e^i OB* 



Fonctions globales 
(jlj Controle du scenario 
® gotoAndPlay 
® gotoAndStop 
® nextFram* 



Ion (press) { 
|gecURL ("Javascript : pop () ") ; 
> 

I 



Figure 6.62 : Appel d'une fonction Javascript depuis Flash 

3 Placez le fichier SWF contenant le bouton dans la page HTML 
dans laquelle vous avez insere la fonction JavaScript. Testez la 
page dans un navigateur Internet ; un clic sur le bouton ouvre une 
nouvelle fenetre avec l'adresse specifiee. 



Pour davantage d' informations sur la publication d'un fichier 
Flash, reportez-vous a la section Publier une animation Flash 
de ce chapitre. 



6.9. Publier une animation Flash 

Lorsque votre animation est terminee, elle est prete pour une exportation 
pour le Web. Flash integre une exportation automatique dans une 
nouvelle page HTML mais vous permet aussi de creer un executable, 
utile pour proposer votre animation en telechargement notamment. 



Tester la vitesse chargement 

Tester la vitesse de chargement est indispensable si vous souhaitez 
proposer votre animation sur Internet. Flash vous permet de tester votre 
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animation selon differentes vitesses de connexion grace au Testeur de 
bande passante, et de savoir precisement quels sont ses elements les plus 
volumineux. 

Procedez ainsi : 

1 Ouvrez une animation Flash et appuyez sur la combinaison de 
touches fctril+r^ 7 ! afin que celle-ci s'affiche dans le Flash Player. 

2 Selectionnez la commande Affichage/Testeur de bande passante 

( |Ctrll +(~B|). Le testeur de bande passante apparait. Flash vous 
indique sous forme de graphique comment se comporte votre 
animation lors de son chargement. 

Toutes les proprietes de 1' animation sont recapitulees dans la colonne de 
gauche : dimensions, cadence, taille, duree, etc. La partie de droite 
affiche graphiquement les images de votre animation Flash. 



FicfWf 



*KrSe Deboguer 



Animation: 
Dim: 600 X 400 pixels 
Cadence cTimages : 12.0 images/sec 
Taie: 39Kotf0917o) 
Duree: ZSmagesg.I s) 
Prechargement : 78 images (6.5 s) 
Parametres: 
Bande passante : 4800 o/sec (100 o/i) 
Elat: 
Image: 25 

37 Ko (37912 0) 




Figure 6.63 : 

Testeur de bande 
passante 



Afin d'acceder a un affichage par image ou par bloc de streaming, 
faites appel a la commande Affichage/Graphique Image par 
Image. Lorsqu'une barre depasse en hauteur la ligne rouge 
horizontale du testeur de bande passante, cela signifie que son 
poids est trop important pour etre joue en temps reel avec la 
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vitesse de chargement indiquee. Flash devra done attendre le 
chargement de cette image. 

Afin de modifier la vitesse de chargement par defaut, selectionnez 
la commande Affichage/Parametres de telechargement 
/Personnaliser dans la fenetre du Flash Player. La boite de 
dialogue Personnaliser les parametres personnalises de 
telechargement apparait. 

Definissez la vitesse de simulation de votre choix et validez par 
un clic sur le bouton OK. Personnaliser les parametres du modem 
permet de tester differentes bandes passantes. 



r r 1 

Personnaliser les parametres de telechargement 1 








rexte menu : 




Vitesse de transmission : 


[ OK | 




3EE 




1200 


octets/sec 
octets/sec 
octets/sec 
octets/sec 
octets/sec 




Annuler 


28.8 


2400 




Reinitialiser 


56 K 


4800 




DSL 


33400 


Tl 




134300 














Parametrage utilise 




2400 


octets/sec 
octets/sec 


Parametrage utilise 


2400 














Parametrage utilise 




2400 


octets/sec 













Figure 6.64 : Simulation de chargement selon differentes vitesses de 
connexion 



REMARQUE 



IM'attendez pas pour tester le poids de votre animation 



Le Testeur de bande passante est un outil primordial si vous realisez 
une animation pour le Web. N'attendez pas d' avoir termine 1' animation 
pour tester son poids. Effectuez cette operation au fur et a mesure de 
votre travail. 
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Les formats de fichier 

Avant de publier votre animation Flash, nous detaillons ici les differents 
formats de fichier s'averant necessaires. 

Le fichier source d'une animation Flash, e'est-a-dire le fichier que vous 
pourrez modifier a loisir au sein du logiciel Flash, est au format FLA. 

Lorsque vous visualisez une animation Flash dans le Flash Player ou 
pour une integration ulterieure dans une page HTML, le fichier de votre 
animation est alors transforme au format SWF. 

Pour creer une application autonome, visualisable sur n'importe quel 
ordinateur qui ne possede pas obligatoirement le Player Flash, vous 
enregistrez votre animation en tant que projection avec 1'extension EXE 
pour Windows ou HQX pour Mac. Chaque format est caracterise par une 
icone differente. 



formats 



Fichier Edition Affichage Favoris Outils 



f- Ifnlfx 




Figure 6.65 : Apercu des differents formats de fichier 
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Ces formats de fichier sont de loin les plus couramment utilises lors du 
travail sous Flash. Vous pouvez egalement transformer votre animation 
en .MOV afin de creer une video QuickTime, en JPEG, .PNG ou .GIF 
pour creer des images statiques ou animees, ou directement au format 
HTML pour une publication immediate sur le Web. 



Exporter au format HTML 

Si vous souhaitez inserer votre animation Flash dans une page HTML 
vide, Flash peut creer automatiquement a la fois le fichier SWF et la 
page HTML avec tout le code necessaire a sa visualisation dans un 
navigateur web. 

Pour cela : 

1 Selectionnez la commande Fichier/Parametres de publication et 
cochez HTML dans l'onglet Formats. Un nouvel onglet HTML 
apparait (voir Figure 6.66). 

2 Parmi les differentes options proposees, plusieurs s'offrent a 
vous : 

_ Modele. L' option Flash seulement, selectionnee par defaut, 
permet uniquement aux utilisateurs en possession du Flash 
Player de visualiser l' animation. Vous pouvez choisir d'autres 
options dans la liste deroulante telles que QuickTime ou Java 
et obtenir des informations sur le format de visualisation en 
appuyant sur le bouton Info situe a droite de la liste deroulante. 

— Dimensions. Cette option determine la largeur et la hauteur de 
la fenetre HTML. Si vous conservez l'option par defaut 
Identique a /'animation, la fenetre s'adapte automatiquement 
aux dimensions de l' animation. 

Vous pouvez egalement indiquer des dimensions en pourcentage. Dans 
ce cas, votre animation sera automatiquement redimensionnee pour un 
affichage optimale, quelle que soit la resolution d'ecran. Avec une valeur 
de 100 %, l'animation sera jouee en plein ecran. 

— Lecture. Determine la maniere dont l'animation sera lue. 

_ Qualite. Plus la qualite est elevee, plus le poids sera important et 
inversement. 

— Mode fenetre. Determine l'arriere-plan de la fenetre du navigateur 
(transparence ou non). 
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Paiametres de publication 



Prof il actuel : 



I&J + M«la 



Formats Flash || HTML j 






Type: 

Flash (.swf) 
HTML (.html) 
D Image GIF (.gif) 
D Image JPEG (.jpg) 

□ image PNG (.png) 

□ Projection Windows (.exe) 

□ Projection Macintosh 

□ QuickTime avec piste Flash (.mov) 


Fichier : 






[J 

V 

;J 
U 


exemple.swf 




exemple.html 




exemple.gif 


exemple.jpg 


exemple.png 




exemple.exe 


exernple.app 




exemple.mov 




Utiliser les noms par defaut 







Publier 



OK 



Annuler 



Figure 6.66 : Publication au format HTML 

Alignement HTML. La position de votre animation Flash est 
determinee par rapport aux autres elements de la page HTML. 

Echelle. En cas de redimensionnement de votre animation, vous 
pouvez specifier l'alignement des differents elements. 

Alignement Flash. Specifie l'alignement de l'animation Flash par 
rapport a la fenetre HTML. 
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3 Apres avoir selectionne les options de votre choix, cliquez sur le 
bouton Publier. Votre page HTML est automatiquement publiee 
avec le fichier SWF dans le meme dossier que le fichier source au 
format FLA. 



RENVOI 



Pour integrer une animation Flash a une page existante, 
reportez-vous au chapitre 4, Alter plus loin avec Dreamweaver. 



Creer un fichier executable 

Si vous souhaitez proposer le telechargement de votre animation ou la 
partager sur un CD-ROM, creer un executable constitue la solution la 
plus pratique. II suffira a toute personne desirant visualiser 1' animation 
de double-cliquer sur 1' executable, sans qu'un navigateur Internet ou le 
Flash Player ne soit necessaire. 

Procedez ainsi : 

1 Ouvrez 1' animation Flash que vous souhaitez exporter en tant que 
projection en selectionnant la commande Fichier/Ouvrir. Validez 
par un clic sur le bouton Ouvrir. 

2 Activez la commande Fichier/Parametres de publication. Restez 
dans l'onglet Formats de la boite de dialogue Parametres de 
publication. Cochez parmi les formats disponibles Projection Mac 
ou Projection Windows. 



0Projection Windows (.exe) singe.exe 



Projection Macintosh 
U QuickTime (.rnov) 



singe, hqx 



singe, mov 







Utiliser les norns par defaut 



Figure 6.67 : Exportation d'une animation Flash en fichier executable. 

Validez en cliquant sur le bouton Publier. Flash cree un fichier 
executable Mac ou Windows dans le meme dossier que votre 
fichier source. 
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6-10. Creer son premier jeu avec Flash 

Maintenant que vous etes familiarise avec les bases de 1' Action Script, 
vous pouvez creer une petite animation interactive. L'objectif de cette 
section consiste a creer un jeu de coloriage. 

Ce jeu fera intervenir differents symboles : Bouton, Clip mais aussi 
quelques actions de base afin de jouer et stopper une animation, a la fois 
sur l'echelle de temps de la scene principale mais aussi au sein de 
l'echelle de temps du clip. 

Sur la scene se trouve un dessin en noir et blanc et quatre boutons de 
quatre couleurs differentes. Un clic sur le bouton de couleur applique 
automatiquement la teinte choisie au dessin. 

Dessiner la forme a colorier 

Le dessin a colorier va se trouver dans un symbole Clip. Ce clip 
contiendra cinq images-cles correspondant aux differentes couleurs qui 
pourront etre appliquees au coloriage grace aux boutons de couleur 
situes a cote. 

Procedez ainsi : 

1 Creez un nouveau symbole en appuyant sur la combinaison de 
touches fctrfl+fFS). Choisissez le comportement Clip et nommez-le 
coloriage. Validez par un clic sur le bouton OK. 

2 Vous entrez en mode Edition de symbole. Dessinez la forme de 
votre choix non coloriee avec les outils de dessin. 

3 Creez quatre nouvelles images-cles sur les images 2, 3, 4 et 5 du 
clip en appuyant sur la touche (F6). 

4 Coloriez chaque exemplaire de la forme dessinee precedemment 
et appliquez une couleur differente sur chaque image-cle. Dans 
cet exemple, les couleurs choisies sont respectivement le rose, le 
bleu, le jaune et le vert. 

5 Le clip comprend cinq images-cles au total : la premiere contient 
le dessin non colorie, 1' image-cle 2 contient un dessin rose, 
l'image3 un dessin bleu, l'image4 un dessin jaune et enfin 
1' image 5 un dessin vert. 
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6 Placez le curseur sur la premiere image-cle du clip coloriage. 
Ouvrez la fenetre Actions d'image avec la touche §§j). Inserez le 
code suivant : 

StopO ; 

Cette action arrete 1' animation a la premiere image. 

coloriage. fla" 




Figure 6.68 : Le clip Coloriage et ses 5 images-cles 

7 Revenez sur la scene principale. Selectionnez le clip Coloriage 
dans la Bibliotheque, accessible par le menu 
Fenetre/Bibliotheque. Placez le coloriage sur la scene. 
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8 Selectionnez-le clip avec l'outil de selection ((v)). Nommez son 
occurrence des sin depuis la fenetre Proprietes. 



Ajouter les boutons de couleur 

II s'agit maintenant de creer quatre boutons de couleurs differentes. En 
cliquant sur le bouton, la tete de lecture se deplacera sur la couleur 
correspondant au coloriage. 

1 Dessinez une forme de couleur rose. Selectionnez-la avec l'outil 
de selection et appuyez sur la touche fre) . Choisissez le 
comportement Bouton. Validez par OK. 

2 Renouvelez cette manipulation a trois reprises afin d' avoir trois 
autres boutons de couleur bleu, jaune et vert. 

3 Placez les boutons sur la scene principale, a cote du coloriage. 
Tous les elements composant le jeu ont ete inseres ; il faut 
maintenant les rendre interactifs avec Action Script. 




Figure 6.69 : Insertion des 4 boutons 
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Placer le code Action Script 

Le jeu de coloriage est base sur le code Action Script place sur chaque 
bouton dans la scene principale. 

Procedez ainsi : 

1 Selectionnez le bouton rose avec l'outil de selection ((v))- Ouvrez 
la fenetre Actions - Bouton en appuyant sur la touche (F9J. Inserez 
le code suivant : 



on (press) { 
dessin . gotoAndStop 
} 



(2); 



Lors d'un clic sur le bouton, la tete de lecture de l'occurrence 
dessin va se deplacer et s'arreter sur 1' image 2, qui correspond a 
la forme coloriee en rose. 

2 Repetez cette manipulation pour les trois autres boutons en 
changeant uniquement le numero de 1' image selon la couleur. Le 
coloriage bleu correspond a l'image3, le jaune a Fimage4 et le 
vert a 1' image 5. 




Du Flash... 
sans Flash 



Tester I'animation 

1 Testez I'animation en appuyant sur [Ctril+f^] . Un clic sur chaque 
bouton fait apparaitre le coloriage correspondant a la couleur du 
bouton. 

2 Lors du clic sur le bouton, le code Action Script se charge de 
deplacer la tete de lecture du clip. 



Creer une animation en 3D avec Cool 3D 31 2 

Creer un texte anime avec Swift 3D 324 

Un site en Flash cle en main 330 

Inserer des jeux en Flash sur un site 339 

Creer un diaporama en Flash 342 

Transformer des videos en animations SWF 364 

Les points essentiels a retenir 368 



310 



LE GUIDE COMPLET 



Chapitre 7 



Du Flash... sans Flash 



Plusieurs applications permettent aujourd'hui de creer des animations 
Flash au sein de sites web... sans qu'il soit necessaire d'utiliser le 
logiciel Flash. 

Flash est un logiciel aux multiples fonctionnalites qui necessite une 
periode d'apprentissage et rebute parfois les neophytes. Partant de ce 
constat, plusieurs editeurs ont developpe des applications capables de 
generer des fichiers Flash, avec une interface plus simple d'emploi et de 
nombreux modeles graphiques facilitant la realisation de publications a 
destination du Web. 

Comme pour n'importe quelle animation Flash, creee ou non avec 
Flash, la derniere version du Flash Player reste indispensable. Rendez- 
vous sur le site Adobe, a l'adresse www.adobe.fr, pour mettre a jour ou 
installer gratuitement le plug-in au sein de votre navigateur Internet. 



RENVOI 



Pour en savoir plus sur le logiciel Flash, reportez-vous au 
chapitre Creer des animations pour le Web avec Flash. 



7.1. Creer une animation en 3D 
avec Cool 3D 

Grace a Cool 3D, un logiciel d' animation de textes et d' images 3D 
accessible aux debutants, vous pouvez creer des animations de texte en 
3D et les exporter ensuite au format Flash. L' application dispose de 
nombreux effets predefinis facilement personnalisables grace a de 
nombreux Assistants. 

Installer Cool 3D 

1 Ouvrez votre navigateur Internet et rendez-vous a l'adresse 
www.ulead.fr/cool3d/runme.htm. Pour telecharger une version 
d'evaluation, cliquez sur le bouton Evaluation gratuite. Cette 
version d'evaluation en francais est limitee a trente jours. La 
version definitive est disponible en ligne sur le site au prix de 
54,95 euros. 
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Flash. 



Plus d'jnformetion 



Figure 7. 1 : Telechargement du logiciel Cool 3D 

Cliquez sur le bouton Telecharger maintenant. Le telechargement 
du logiciel necessite une inscription gratuite sur le site de 
Fediteur. 

Cliquez sur le bouton Creer votre compte. Entrez vos 
coordonnees en indiquant une adresse e-mail valide et un mot de 
passe, qui vous seront demandes ulterieurement. Pour sauvegarder 
les informations saisies, cliquez sur le lien Soumettre. 

Identifiez-vous sur le site avec l'adresse e-mail et le mot de passe 
choisis prealablement. Apres creation de votre compte, vous 
accedez a la zone de telechargement. Cliquez sur le lien FTP Site 1 
(USA) ou FTP Site 2 (USA) ; peu importe le lien choisi, le logiciel 
obtenu sera identique. 

Double-cliquez sur l'icone de CooBD pour lancer 1' application 
sur votre ordinateur. 
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Le module EnVector 

Le module EnVector, integre a Cool 3D, permet de creer facilement 
des formes et des objets qui pourront ensuite etre animes dans le logiciel 
Flash pour une exportation ulterieure sur le Web ou sur CD-Rom 
notamment. 



Inserer du texte 

1 Pour creer un nouveau projet, cliquez sur le menu 
Fichier/Nouveau. Pour editer ses dimensions, activez la 
commande Projet/Dimensions. 

2 Par defaut, 1' animation est vide et composee d'un fond noir. Pour 
inserer du texte, cliquez sur l'icone Texte dans la barre d'outils 
situee a gauche de 1' interface. 

3 La boite de dialogue Inserer du texte s'affiche. Entrez le titre de 
votre choix. Pour modifier la police, selectionnez le texte, puis 
choisissez une police dans la liste deroulante. Vous pouvez 
egalement parametrer la taille et choisir un style gras ou italique 
en appuyant respectivement sur les boutons B (Bold) et I (Italic). 
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En cliquant sur le bouton Plus, vous accedez a une liste de 
caracteres speciaux. Si vous cliquez sur un caractere, celui-ci 
s'affiche dans la boite de dialogue Inserer du texte. Cliquez sur le 
bouton OK pour enregistrer les modifications. Par defaut, le texte 
est dore. 



Placer des graph. ques 

Cool 3D permet de dessiner grace aux outils mis a votre disposition ou 
d' importer des images au format vectoriel ou bitmap pour illustrer vos 
animations et y placer un arriere-plan. 

Inserer une forme 

1 Pour inserer un dessin dans une animation Cool 3D, cliquez sur le 
bouton Inserer un graphique situe dans la colonne a gauche de 
1' interface. 

2 La fenetre Editeur de chemin s'affiche. Cliquez sur le bouton 
Forme de la barre d'outils pour dessiner une forme au sein de la 
fenetre principale. 



Editeur de chemin 



|BB|P|?|P| :=.|»M -feF3 W^ TF3 It|253 U 




Reinitialise! OK Annulet 



Figure 7.3 ; Dessiner avec Cool 3D 
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Une barre d' options horizon tale apparait dans laquelle vous 
pouvez choisir une forme. Vous etes libre de placer des formes 
geometriques classiques, telles que des ronds et des rectangles, ou 
d'ajouter une etoile. 

Maintenez le bouton gauche de la souris au sein de la zone de 
dessin pour tracer votre forme. Si vous souhaitez effacer votre. 
travail, cliquez sur le bouton Reinitialises 

II n'est pas possible d'ajouter des couleurs depuis cette fenetre. 

La procedure est expliquee dans la section Ajouter des ejfets 
speciaux de ce chapitre. 



Modifier une forme 

1 Pour redimensionner vos traces, cliquez sur le bouton Objet de la 
barre d'outils. Des poignees de modification s'affichent 
automatiquement autour de la forme. 

2 Placez le curseur sur l'une des poignees situees dans les coins 
pour agrandir ou diminuer proportionnellement la taille de la 
forme. 

3 Pour redimensionner horizontalement ou verticalement la forme, 
cliquez sur les autres poignees. 

4 Pour des modifications plus precises, cliquez sur le bouton 
Ajuster. Placez votre curseur sur une intersection. Le curseur 
blanc devient noir. Maintenez le bouton gauche de la souris 
enfonce pour deformer la selection. 



Editeur de chemin 




Figure 7.4 : 

Ajuster une forme 
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ASTUCE 



Annuler et refaire une action 

Grace aux boutons Annuler et Refaire de la barre d'outils, vous 
pouvez a tout moment revenir en arriere ou recuperer une action 
annulee. 






Importer une image 



Pour importer une image dans Cool 3D, cliquez sur le bouton 
Importer un graphique de la barre d'outils. Choisissez un fichier 
au format vectoriel, de type Adobe Illustrator. 

Le format vectoriel est ici privilegie puisque l'objectif est 
d'animer le graphique selectionne. Validez par un clic sur le 
bouton Ouvrir. 



KffllTlON 



Format vectoriel 

Pour creer des dessins vectoriels, vous devez utiliser une application 
de dessin vectoriel. Parmi les plus couramment utilisees, citons le 
logiciel Adobe Illustrator, dont une version d' evaluation est disponible 
sur le site d' Adobe, a l'adresse www.adobe.fr. 

Les logiciels de retouche d'images, comme Photoshop Elements, 
proposent l'exportation, non pas de fichiers vectoriels, mais de fichiers 
bitmaps. 

Un fichier bitmap est compose de pixels. En cas de redimensionnement, 
les pixels se deforment et peuvent alterer la qualite de 1' image. Une image 
vectorielle est creee a partir de coordonnees mathematiques. En cas de 
redimensionnement, la qualite reste constante, mais le poids du document 
est bien superieur a celui du fichier bitmap. 



Cool 3D inclut une fonction de conversion en vecteur, qui 
transforme un fichier bitmap en fichier vectoriel. Dans la barre 
d'outils, cliquez sur le bouton Convertir en vecteur. 

Selectionnez un fichier au format JPEG ou BMP sur votre 
ordinateur, puis validez par un clic sur le bouton Ouvrir. Cette 
fonction n'est efficace que pour des images relativement simples 
de type logo ou clipart, mais elle est deconseillee pour les photos. 

La boite de dialogue Convertir en vecteur s'affiche. Un apercu du 
resultat vectorise apparait. 
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r Afficher le chemin seul 
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Figure 7.5 : 

Convertir une image 
bitmap en image 
vectorielle 



&;" Pour plus d 'informations sur le format JPEG, reportez-vous au 
REN voi chapitre Optimiser des images pour le Web. 

6 Pour modifier des parametres, deplacez les curseurs d' option 
disponibles, puis validez par un clic sur le bouton OK. 
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Figure 7.6 : 

Apercu de I'image 
apres vectorisation 
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Pour personnaliser un effet, vous pouvez inserer une image 
d'arriere-plan, telle une photo au format JPEG. Dans la barre 
d'outils, cliquez sur le bouton Inserer une image d'arriere-plan, 
puis choisissez une image sur votre ordinateur. Validez par un clic 
sur le bouton Ouvrir. 

Apres la selection de I'image, cliquez sur le bouton OK de la 
boite de dialogue Editeur de chemin. Le dessin apparait a cote du 
texte. Par defaut, les elements ont un aspect dore mais vont etre 
personnalises par la suite grace aux effets. 

Pour deplacer le dessin par rapport au texte, selectionnez Position 
dans la liste deroulante situee en haut a gauche de l'interface. Le 
curseur se transforme en main, maintenez le bouton gauche de la 
souris enfonce sur les elements a deplacer. 



Fichier Edition Affichage Image Fenetre Aide 
D OS B j O -^ ! lObjetgraphique^ |?\ *' W iff? 

Position 




Cool 3D 



Figure 7. 7 : 

Modification 
des elements 
dans la zone 
d'animation 



Ajouter des effets speciaux 



Tout l'interet de Cool 3D reside dans la richesse de ses effets 3D 
applicables facilement, en quelques clics, avec un apercu en temps reel. 
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1 Affichez la fenetre Palette magique avec la commande 
Affichage/Palette magique. Deroulez le menu pour acceder a 
1' ensemble des fonctionnalites proposees. 
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Figure 7.8 ; La fenetre Palette magique 

Dans cet exemple, cliquez sur le menu Lumiere et couleur. Un 
clic sur chaque categorie entraine l'affichage des effets proposes. 

Pour les appliquer a votre animation, cliquez sur une vignette, 
puis glissez-deplacez-la vers votre document. Au sein d'une 
meme categorie, un effet en remplace automatiquement un autre. 
Par contre, vous pouvez cumuler les effets issus de categories 
differentes. 




Figure 7.9 : Selection d'un effet de lumiere et de couleur 
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4 Pour deplacer votre objet dans la zone d' animation, maintenez 
enfonce le bouton gauche de la souris tout en faisant glisser le 
curseur a gauche ou a droite. 



Inserer des cubes et des spheres en trois dimensions 

Depuis la barre d'outils principale, vous pouvez ajouter une dizaine 
d'objets geometriques prets a l'emploi. Les effets speciaux deja presents 
dans le document sont automatiquement appliques aux nouveaux objets 
geometriques inseres. 



Personnaliser un effet 

1 Pour personnaliser chaque effet, vous disposez d'une barre 
d' options sous la palette magique. Modifiez les attributs de 
chaque effet en selectionnant les parametres de bordure, 
d'extrusion, de biseau depuis les listes deroulantes adequates. 





Saut 
Souffle 
Coup 
Effets de biseau 
Empreinte 
Cadre 

Biseau personnalise 
Creux 
Tableau 




Exttusion : Poids: Bordure: Profondeui: Precision: 

3'[70~3 f5~^ [5~3 fiF^ [T-T] 



Figure 7. 10 : Options de la palette magique 

Un aper?u des modifications effectuees est visible immediatement 
au sein du document. Si vous souhaitez que ces nouveaux 
parametres soient enregistres pour une utilisation ulterieure, 
cliquez sur le bouton Ajouter situe dans la barre d' options. Une 
vignette correspondant au nouvel effet est ajoutee. 



Faire defiler toutes les options 

Les options de personnalisation d'effets sont nombreuses. Utilisez les 
barres de defilement situees a droite de la barre d'option pour acceder a 
tous les parametres proposes. 
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Publier I'animation au format Flash 

Apres avoir cree votre animation, vous pouvez visualiser un apercu au 
sein de Cool 3D, puis l'exporter au format Flash. 

1 Pour visualiser un apercu de l'effet ajoute, cliquez sur le bouton 
Lecture. L'effet tourne en boucle. Appuyez sur le bouton Stop 
pour arreter I'animation. 

2 Si l'effet obtenu est trop rapide ou trop lent, ajustez le nombre 
d' images dans la liste deroulante Images. Plus le nombre d' images 
est reduit, plus I'animation est rapide, et inversement. 

3 Pour ajuster la vitesse d'une animation, vous pouvez egalement 
modifier le nombre d' images par seconde au sein de la liste 
deroulante ips. 




Figure 7.11 : Definition des options de lecture 

Pour exporter I'animation au format Flash, selectionnez la 
commande Fichier/Exporter vers Macromedia Flash/Avec JPEG. 

L' animation generee par Cool 3D va etre transformed en une 
multitude d' images JPEG compressees, puis exportee au format 
Flash. 



RENVOI 



Pour plus a" informations sur la compression au format JPEG, 
reportez-vous au chapitre Optimiser des images pour le Web. 
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La fenetre Enregistrer sous un fichier Macromedia Flash (SWF) 

apparait. Entrez un nom pour votre animation, puis choisissez 
dans la liste deroulante Qualite la compression a appliquer aux 
images JPEG. Plus la qualite est importante, plus le poids du 
documentest grand. Validez en cliquant sur le bouton Enregistrer. 



Enregistrer sous un fichier Macromedia Flash (SWF) 



Enregistrer dans : | [£) Bureau 



&m- 



£jMes documents 


£jsite 


j Poste de travail 


H^lena2.swf 


*^Favoris reseau 


%tostswf 


i _J animation 




^HD_screenpack 




£3 images 





Nom du fichier: 
Type: 

Options JPEG 
Qualite (0.100): 



Cool3d 



Lecteur Flash f.swf) 



"3 



Annuler 



^ 



Defaut 



Sous-echantillonnage : |YUV411 ^j 



Figure 7. 12 : Exportation de I'animation au format SWF 

Pour publier I'animation sur Internet, vous devez l'inserer dans 
une page HTML. Pour effectuer cette manipulation, aidez-vous 
d'un editeur web tel que Dreamweaver. 



Pour plus d 'informations sur la publication pour le Web avec 
renvoi Dreamweaver, reportez-vous au chapitre Aller plus loin avec 
Dreamweaver. 



REMARQUE 



Utiliser d'autres logiciels de creation 

De nombreuses applications proposent desormais la creation 
d' elements Flash sans qu'il soit necessaire de passer par le logiciel 
Flash. Parmi celles-ci, citons CoffeeCup Flash Fire Starter, propose sur 
le site www.coffecup.com. Cette application offre tous les elements 
permettant de creer des animations simples en quelques minutes. 
D'autres applications sont egalement disponibles pour la creation de 
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menus en Flash ou de formulaires sans necessiter la maitrise 
d'ActionScript, le langage de programmation de Flash. 



7.2. Creer un texte anime avec Swift 3D 

Swift 3D propose la creation de textes animes particulierement 
attrayants, d'un poids raisonnable pour une mise en ligne sur Internet, 
grace a une publication au format Flash. 

II s'agit d'une application complete, a mi-chemin entre le logiciel 
personnel et professionnel, offrant des fonctions 3D avancees permettant 
de generer des animations que vous pourrez publier sur le Web au 
format Flash. 

Si vous etes interesse par la 3D et que vous n'ayez jamais ose franchir le 
pas en raison de la complexite des logiciels dedies a ce type 
d' application, Swift 3D constitue un excellent preambule et permettra de 
vous familiariser avec cet environnement. Dans ce qui suit, nous nous 
interesserons plus particulierement a la creation d'un texte anime. 



Installer Swift 3D 

1 Pour telecharger une version d'evaluation de Swift 3D, rendez- 
vous sur le site de l'editeur, a l'adresse www.erain.com. La version 
d'evaluation accessible pendant trente jours inclut l'ensemble des 
fonctionnalites, mais il n'est pas possible d'enregistrer un fichier. 
La version complete est disponible au prix de 220 euros environ 
sur le site de l'editeur (voir Figure 7.13). 

2 Choisissez l'onglet Download, puis Free Trials et cliquez sur le 
Lien Download Trials dans la section Swift 3D. 

3 Enregistrez-vous en ligne, puis indiquez une adresse e-mail 
valide. Ouvrez votre logiciel de messagerie et cliquez sur le lien 
indique pour confirmer votre enregistrement. Identifiez-vous sur 
le site pour telecharger une demonstration du logiciel. 

4 Avant de lancer 1' installation de Swift 3D, assurez-vous que Flash 
n'est pas ouvert. S'il l'est, 1' installation ne pourra pas etre 
finalisee. L'interface de Swift 3D apparait (voir Figure 7.14). 
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Figure 7. 13 : Telechargement de Swift 3D 
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Figure 7. 14 : Interface de Swift 3D 
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Creer le texte 

1 Pour inserer du texte dans la scene principale, cliquez sur le 
bouton Create Texte (Creer du texte) situe dans la barre de 
navigation horizontale. 

2 Pour personnaliser le texte insere, modifiez sa police dans la liste 
deroulante Font accessible dans la colonne de gauche. 

3 Modifiez l'intitule du texte dans la zone de texte et definissez son 
alignement en cliquant sur les icdnes correspondantes situees 
juste en dessous. Un apercu des modifications s'affiche dans la 
scene principale. 

4 La fenetre Front Active affiche votre texte vu de face. Une autre 
vision est proposee dans la fenetre de droite : perspective, vue de 
haut ou de bas, etc. 

5 Pour modifier Tangle de vue, cliquez sur le bouton situe en haut a 
gauche de la fenetre et selectionnez la perspective choisie dans le 
menu contextuel qui s'affiche. 




Figure 7.15 : 

Texte cree avec 
Swift 3D 



Habiller le texte en 3D 

1 Pour habiller le texte cree, cliquez sur le bouton Show Materials 

(Afficher les textures) situe en bas de 1' interface. 
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Figure 7.16 : 

Selection d'une texture 
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2 Plusieurs onglets s'affichent pour definir les effets a appliquer. 
Cliquez par exemple sur l'onglet Reflective et optez pour un effet 
rouge reflechissant. 

3 Cliquez sur la vignette, puis glissez-deplacez-la vers votre texte : 
1' effet est immediatement applique. 




Figure 7.17 : Application d'une texture 

4 Pour ajouter des effets de lumiere, activez le bouton Show 
Lightings (Afficher les effets de lumiere). 

5 Plusieurs dizaines d' effets sont accessibles d'un clic sur chaque 
onglet. Pour ajouter un effet de lumiere coloree, activez l'onglet 
Colors, puis glissez-deplacez un effet vers le texte en vue Front 
Active (Vue de face) pour visualiser un apercu des modifications. 




Figure 7. 18 : Application d'un effet de lumiere 

6 Selon que vous etes satisfait ou non des effets appliques, vous 
pouvez a tout moment annuler ou appliquer de nouveau les 
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modifications en cliquant sur les boutons Undo (Annuler) et Redo 
(Refaire) de la barre de navigation principale. 



Animer le texte 

1 Swift 3D dispose de nombreux effets d' animation applicables aux 
objets de votre animation. Cliquez sur le bouton Show 
Animations (Afficher les animations) pour acceder aux animations 
disponibles. 

2 Cliquez sur chaque onglet pour visualiser les vignettes d'apercu 
correspondantes. Pour appliquer un effet sur le texte, glissez- 
deplacez sa vignette sur la fenetre principale, en vue Front Active. 
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Figure 7.19 : 

Animation du texte 



3 Pour finaliser l' animation, placez le curseur sur les spheres situees 
en bas de V interface et deplacez-le pour les faire tourner. 
L'intensite de la lumiere sur l'objet 3D ainsi que les angles de 
perspective sont modifies selon les mouvements effectues. 




Figure 7.20 : 

Contrdle de la 
rotation 
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Rendu et exportation Flash 

1 Pour afficher un apercu de 1' animation telle qu'elle sera exportee, 
cliquez sur r onglet Preview and Export Editor. 

2 Dans la liste deroulante Target File Type (Type de fiches cibles) 
situee dans la colonne de gauche, choisissez le format Flash avec 
exportation (SWF). 



REMARQUE 



Importation dans Flash 



Pour importer une animation creee avec Swift 3D au sein d'un fichier 
Flash, selectionnez le format SWFT (Swift 3D Flash Importer, 
Importation de fichiers Swift 3D pour Flash) au sein de la liste 
deroulante Type de fichier. 



Conservez les options par defaut et cliquez sur le bouton 
Generate All Frames (calculer toutes les images). Toutes les 
images necessaires a la creation de 1' animation sont calculees. Les 
textures et effets de lumiere sont appliques a l'objet. II s'agit de 
l'etape de rendu. 




Figure 7.21 : Rendu de I'animation 
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4 Pour exporter 1' animation obtenue, cliquez sur le bouton Export 
All Frames (Exporter toutes les images). L' animation est 
compressee et prete a une publication sur le Web. Notez que dans 
la version d' evaluation, il n'est pas possible d'exporter 
1' animation. 

5 Pour l'inserer dans une page web, faites appel a un editeur web tel 
que Dreamweaver. II se chargera d'inserer automatiquement le 
code necessaire au bon fonctionnement du fichier Flash au sein de 
la page HTML. 

7.3. Un site en Flash cle en main 

Creer un site integralement en Flash est loin d'etre a la portee des 
debutants et demande du temps. Avec SwishSites, vous disposez d'un 
large choix de modeles graphiques dignes de professionnels, quelle que 
soit la nature de votre site (personnel, associatif ou meme commercial). 

Vous pourrez ensuite personnaliser le modele telecharge avec le logiciel 
SwishMax, propose par le meme editeur. Avec ce logiciel, il est possible 
de creer des fichiers au format Flash rapidement, de maniere beaucoup 
plus simple qu'avec l'application Flash. SwishMax rend plus accessible 
la creation animee pour le Web. 



Commander une interface en ligne 
sur SwishSites 

SwishSites est un service payant propose par le site Swishzone. II s'agit 
d' interfaces graphiques soignees et realisees par des graphistes 
professionnels que vous pourrez acquerir en ligne a des fins personnelles 
ou commerciales a partir de 20 euros environ. Pour modifier une 
interface, vous devrez faire appel au logiciel SwishMax, dont vous 
trouverez une version d' evaluation gratuite sur le site. 

1 Ouvrez votre navigateur Internet et rendez-vous a l'adresse 
www.swishzone.com. 



REMARQUE 



Swishzone en version f rancaise 

Le site propose une traduction rapide de la presentation de ses 
differents produits. Cliquez sur le drapeau sitae en haut a droite pour 
acceder a la page de presentation des produits qui a ete traduite. En 
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revanche, pour visualiser les modeles et acheter votre interface en 
ligne, il vous faut quelques notions d' anglais, puisque c'est la seule 
langue disponible. 



Cliquez sur le lien SwishSites pour visualiser les modeles mis a 
votre disposition. 

Quelques exemples sous forme de vignettes apparaissent. Pour 
visualiser la totalite des sites disponibles, cliquez sur le lien View 
All Sites (Voir tous les sites). 
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Figure 7.22 : Sur le site Swishzone, plusieurs dizaines de modeles 
d'interfaces SwishSites sont disponibles 

Les sites sont di vises en deux categories : 

— Dynamic sites for SwishMax (Sites dynamiques pour 
SwishMax) : tous les textes de ces interfaces sont situees dans 
des fichiers texte externes pour une mise a jour facilitee. 

— Sites for Swish 2 et SwishMax : les textes des modeles sont 
inclus directement au sein de 1' interface graphique, et non dans 
un fichier externe. lis peuvent etre personnalises avec Swish 2 
et SwishMax, disponibles chez le meme editeur. 
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4 Une centaine d' interfaces environ apparatt. Pour avoir un apercu 
du modele graphique au sein du navigateur, cliquez sur sa 
vignette. Vous pourrez tester la navigation et mieux apprecier le 
design du site. 
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Figure 7.23 : Apercu d'une interface SwishSites dans le navigateur 

Pour acheter 1' interface, cliquez sur le lien Buy Now. Cochez la 
case correspondant a votre modele. Actuellement, les prix sont 
indiques en dollars, mais ils seront convertis en euros par la suite. 

Indiquez vos coordonnees : nom, prenom, adresse e-mail et 
numero de carte de credit. Quelques minutes apres votre 
inscription, un e-mail avec toutes les informations necessaires 
vous permet de telecharger le modele choisi. 



Installer un modele 

1 Le modele selectionne apparatt sous forme d'un fichier 
executable. Pour le lancer sur votre ordinateur, double-cliquez 
dessus. 
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2 Choisissez le dossier dans lequel vous souhaitez placer le modele. 
Par defaut il s'agit de C:\MyDocuments. Pour modifier le 
repertoire d' installation, cliquez sur le bouton Browse, puis 
choisissez un dossier sur votre ordinateur. 

3 Pour poursuivre le processus d' installation, entrez un "code de 
deblocage" (unlock code) re?u precedemment par e-mail. 

4 Rendez-vous dans le repertoire contenant le modele telecharge. 
Les fichiers sources du modele telecharge portement 1' extension 
.swi. Ils devront etre personnalises avec le logiciel SwishMax, 
propose chez le meme editeur. 

5 Pour verifier sur votre ordinateur le fonctionnement de votre site, 
cliquez sur la page d' index au format HTML situee dans le 
repertoire Upload. 

Personnaliser un modele avec SwishMax 

SwishMax est un logiciel d'edition vous permettant d'editer l'interface 
graphique telechargee avec SwishSites pour 1' adapter a vos besoins. 

Installer SwishMax 

Pour personnaliser chaque page du site telecharge, il faut les ouvrir une 
par une et les modifier avec le logiciel SwishMax. Apres les avoir 
modifiees, il ne restera plus qu'a les exporter une par une au format 
SWF, sans changer leur nom pour conserver l'arborescence initiale. 

1 Rendez-vous sur le site Swishzone a l'adresse www.swishzone.com. 
Dans la barre de navigation, cliquez sur le bouton Products 
(Produits), puis choisissez SwishMax (voir Figure 7.24). 

2 Cliquez sur le bouton Download pour telecharger une version 
d'evaluation. Double-cliquez sur l'executable pour lancer 
F installation sur votre ordinateur. 

3 Double-cliquez sur l'executable pour lancer l'application. 
L'interface de SwishMax apparatt. 
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Figure 7.24 : 

Telechargement 
du logiciel 
SwishMax 



Ouvrir un fichier .swi 

SwishMax est une application permettant d' exporter des animations au 
format SWF sans utiliser Flash. Les fichiers sources utilises par 
SwishMax portent l'extension .swi. 

1 Choisissez la commande Fichier/Ouvrir. Selectionnez sur votre 
ordinateur un fichier au format SWI. Celui-ci s'affiche dans 
1' interface. 




Figure 7.25 : Personnalisation d'une page dans SwishMax 
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2 Tous les elements sont personnali sables : textes, couleurs, 
graphiques. Quel que soit le modele choisi, la personnalisation se 
deroule de maniere identique. 



ATTENTION 



Conserver les fichiers originaux en lieu sur 

Avant toute personnalisation, il est fortement de conseille de realiser 
une copie des fichiers originaux du modele sur votre disque. Ainsi, vous 
pourrez travailler sur cette copie et acceder a tout moment aux fichiers 
d'origine en cas de fausse manipulation. II est primordial, lors de la 
copie, de ne modifier ni l'arborescence ni les noms des differents 
fichiers. 



Personnaliser le texte 

Commencez par personnaliser le texte de votre modele : noms, texte de 
presentation, adresse de contact, etc. En ouvrant chacun des fichiers 
SWI contenus dans le modele, vous pourrez modifier au fur et a mesure 
1' ensemble de ces elements. 

1 La section Resume situee a gauche de la scene affiche tous les 
elements de la scene de maniere hierarchique de sorte que vous 
pouvez visualiser facilement les elements a modifier. 
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Figure 7.26 : 

La section 
Resume affiche 
la liste des 
elements 
contenus dans 
la page 

2 Placez le curseur sur le texte, reconnaissable grace a la lettre T au 
sein de la section Resume. Double-cliquez pour afficher la fenetre 
Texte qui apparait a droite de 1' interface. 
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3 Cette fenetre vous permet d'inserer ou de remplacer le texte de 
votre choix, en choisissant la police, la taille, la couleur ou bien 
encore le style de texte a utiliser. 

Ajouter des effets 

1 Pour ajouter des effets supplementaires au texte, cliquez dessus du 
bouton droit dans la section Resume. Dans le menu contextuel, 
selectionnez Effet. 




Figure 7.27 : 

Selection 
d'un effet de 
texte 



2 Plusieurs dizaines d' effets sont disponibles et parametrables par 
1' intermediate des boites de dialogue disponibles. Cliquez sur 
1' effet Fondu/Fondu entrant situe en debut de liste. 
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3 L' effet se place automatiquement dans la ligne de temps situee 
dans la partie superieure de 1' interface. Double-cliquez dessus 
dans la ligne de temps pour afficher la boite de dialogue 
correspondant a 1' effet selectionne. Modiflez les options, puis 
validez en cliquant sur le bouton Fermer. 

Modifier les images 

Plusieurs images sont inserees au sein des modeles SwishSites. Vous 
pouvez les conserver, les modiifier ou en inserer de nouvelles depuis 
1' interface de SwishMax. 

1 Cliquez sur Image dans 1'arborescence des elements situee a 
gauche de la scene. Selectionnez l'image en cliquant dessus. Des 
carres blancs apparaissent autour pour confirmer la selection de 
1' element. 

2 Sous l'onglet Forme situe a droite de la scene, modiflez le nom 
donne a votre image pour une meilleure organisation dans 
1'arborescence des elements. II est important d' utiliser des 
intitules simples a reperer en cas de modification ulterieure. 

3 En cliquant sur le bouton Proprietes situe sous le meme onglet, 
vous pouvez modifier la position horizontale (en X) et la position 
verticale (en Y) de l'image ainsi que ses dimensions. 



Transfcxm 




[ I Recouvrements remplis 



Figure 7.28 : 

Modification des proprietes d'une image 



Exporter la page au format Flash 

Apres avoir modifie toutes les pages composant le modele selectionne 
dans SwishSites, vous devez les exporter au format SWF pour pouvoir 
les publier sur Internet. 
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1 Activez la commande Fichier/Exporter. Dans la boite de dialogue 
qui apparait, choisissez le format SWF et exportez votre fichier 
dans le dossier UPLOAD sans modifier son nom. 
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Figure 7.29 : Exportation au format SWF 

2 Dans le dossier UPLOAD se trouve le fichier index.html, qui fait 
appel aux differentes pages exportees au format SWF. Si vous 
placez votre fichier dans un autre repertoire, vous ne pourrez pas 
obtenir un aper?u complet de votre site. 

Modifier les fichiers HTML 

Par defaut, deux fichiers HTML sont presents pour chaque modele : 
main.html et index.html. Pour publier chaque ficher HTML, vous devez 
modifier titre et balises meta dans un editeur web. 
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Ouvrez le fichier index.html avec un editeur de texte tel que 
Dreamweaver, puis editez le titre et les balises meta contenues 
dans le fichier. 




Pour plus d f informations sur Vinsertion d y un titre et de balises 
META au sein d'une page web, reportez-vous au chapitre 
Referencer un site web. 

2 Lorsque vous avez termine, enregistrez les modifications via le 
menu Fichier/Enregistrer sous. Repetez ces manipulations pour le 
fichier main.html. 

3 Publiez les fichiers modifies au sein du repertoire UPLOAD sur 
votre serveur web, en prenant soin de conserver l'arborescence 
initiale. 

4 Pour visualiser votre site, rendez-vous a l'adresse www.monsite.com 
/index.html, monsite.com etant evidemment a remplacer par 
l'adresse de votre site web. 



REMARQUE 



Kit graphique Flash 

Le logiciel A4Desk, edite par Bluesquad a l'adresse www.bluesquad.com, 
propose de nombreux kits graphiques pour la creation de C. V. ou de 
sites professionnels. Les modeles sont moins reussis que ceux du site 
Swishzone, mais la personnalisation est rapide. Apres la selection de 
votre projet, la personnalisation se deroule par le biais d'onglets et de 
champs de formulaire qu'il suffit de modifier. Simple et efficace ! 



7.4. Inserer des jeux en Flash 
sur un site 

Vous pouvez proposer quelques jeux en Flash pour distraire vos 
visiteurs, sans etre pour autant un developpeur Flash chevronne, et ce 
grace au site Jeuxenflash. II permet d'integrer une console sur un site 
avec six jeux gratuits. 

Telecharger la console 

1 Rendez-vous sur le site www.t45ol.com specialise dans les jeux 
exclusivement realises en Flash. Tous les genres sont representes : 
sport, adresse, arcades, reflexion, il y en a pour tous les gouts. 
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Figure 7.30 : Ce site propose de nombreux jeux gratuits 

2 Sur la page d'accueil, cliquez sur le lien Jeux pour webmasters. 

Cette section permet d' inserer sur son page web une selection de 
jeux proposes sur le site. 
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Figure 7.31 : Insertion de jeux sur son site 
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Inserer le code pour une publication en ligne 

1 Plusieurs services sont proposes par le site : moteur de recherche 
de jeux, selection aleatoire de jeux ou d'un jeu en particulier que 
vous aurez choisi. 

2 Cliquez du bouton droit et activez la commande Copier dans le 
menu contextuel. 

3 Ouvrez la page web dans laquelle vous souhaitez inserer la 
console en recourant a un editeur web tel que Dreamweaver. 
Cliquez sur l'onglet Fractionner pour visualiser simultanement le 
code et un apercu de la page web. 



S" Pour plus d 'informations sur la creation de pages web avec 
renvoi Dreamweaver, reportez-vous au chapitre Alter plus loin avec 
Dreamweaver. 

4 Copiez-collez le script indique, similaire au code suivant, au sein 
des balises <B0DY> et </B0DY> : 

<iframe src="http: //www. t45ol . com/script/daily .php" 
Sx name=" Jeu Du Jour" id="l" width="150" height="105" 
X marginwidth="0" marginheight="0" scrolling="no" 
x f rameborder="0"> 
</if rame> 

Ce code permet d'appeler le fichier Flash au sein de la page web. 
Sur Dreamweaver, vous ne verrez pas le jeu Flash, il est 
indispensable d'enregistrer prealablement la page puis de la 
lancer depuis un navigateur Web. 

5 Au sein du navigateur, une vignette avec le "jeu du jour", choisi 
aleatoirement parmi tous les jeux proposes sur le site, apparait a 
l'ecran. Pour jouer, il suffit de cliquer dessus. 
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Figure 7.32 : Insertion du code dans Dreamweaver 
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7.5. Creer un diaporama en Flash 

Profiter de l'interactivite de Flash pour publier un album photo en ligne, 
c'est possible grace a Flash Slide Show Builder, une application 
specialement dediee a la creation de diaporamas. Elle propose egalement 
de realiser des retouches simples sur des images. Les modeles sont 
reussis, avec des styles varies, du cartoon, etc. 

La realisation de 1' album photo se deroule en quatre etapes. Vous 
pouvez ajouter musique et transitions. L'exportation s'effectue au 
format Flash pour que le document puisse etre integre comme n'importe 
quelle autre animation. 

Bien qu'en anglais, 1' interface est accessible a tous grace a de 
nombreuses icones, qui permettent de creer et d'editer facilement toutes 
les options necessaires a la creation du diaporama. 



Installer Flash Slide Show Builder 

Flash Slide Show Builder est une application proposee au prix de 
35 euros environ. Vous pourrez vous la procurer directement sur le site 
de l'editeur. 

Une version d' evaluation de trente jours incluant toutes les 
fonctionnalites est disponible. Elle permet de tester l'efficacite du 
logiciel. Seule difference par rapport a la version payante : la presence 
d'un copyright de l'editeur sur chaque photo realisee avec 1' application. 

1 Ouvrez votre navigateur Internet et rendez-vous a l'adresse 
www.photo-to-dvd.com. Dans la barre de navigation principale, 
activez le lien Products/ Flash Slide Show Builder pour acceder a la 
page de presentation du logiciel (voir Figure 7.33). 

2 Cliquez sur le bouton Download (Telecharger) puis Free to try 
(Essayer gratuitement) pour telecharger une version d' evaluation 
de 1' application. Selectionnez un emplacement sur votre 
ordinateur, puis cliquez sur le bouton Telecharger. 

3 Double-cliquez sur 1' executable, puis choisissez un fichier 
d' installation sur votre ordinateur. Lancez Flash Slide Show 
Builder. 
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Figure 7.33 : Telechargement de Flash Slide Show Builder 




Flash Album Studio 

Flash Album Studio est une application proposee par le meme editeur. 
Elle permet de creer des albums photos au format Flash. II s'agit d'une 
version "allegee" de Flash Slide Show Builder Album, vendue au prix de 
25 euros environ et comprenant moins de transitions et d'effets speciaux, 
mais avec des themes graphiques reussis, adaptes a un usage personnel. 



Selectionner les photos 

1 Par defaut, lors du premier demarrage, les fichiers contenus au 
sein du repertoire Mes images de Windows s'affiche. 

2 Pour selectionner un autre repertoire, cliquez sur le dossier ad hoc 
dans l'Explorateur pour charger automatiquement les vignettes 
correspondantes (voir Figure 7.34). 



AS * tE Agrandir et diminuer l'Explorateur 

Placez le curseur entre la fenetre de l'Explorateur et la fenetre de 
selection des photos : le curseur se transforme en deux fleches 
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. 



ASTUCE 



horizontals et verticales. En maintenant le bouton gauche de la 
souris enfonce et tout en la deplacant vers la gauche ou la droite, 
vous pouvez redefinir les espaces entre les elements. 



ASTUCE 




Figure 7.34 : Apercu des vignettes dans Flash Slide Show Builder 

3 Cliquez sur une photo et glissez-deplacez-la en bas de l'ecran. 
Cette fenetre est destinee a recevoir les images utilisees dans le 
diaporama. 



Inserer une photo par double die 

Si vous double-cliquez sur l'une des photos du repertoire, celle-ci 
s'affiche automatiquement dans la selection du diaporama. 



Renouvelez cette operation autant de fois que necessaire. Si vous 
souhaitez selectionner plusieurs photos en meme temps, 
maintenez la touche (ctrQ enfoncee. Inserez au minimum une 
dizaine de photos pour eviter que le diaporama ne tourne en 
boucle, le maximum etant fixe a deux cents photos. 
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Figure 7.35 : Selection des photos du diaporama 

Pour inserer toutes les photos d'un dossier, cliquez sur le bouton 
Add all (Ajouter toutes les photos). Vous pouvez aussi les 
supprimer avec le bouton Remove (Effacer) et Remove All 
(Effacer toutes les images selectionnees). 

Sous les vignettes selectionnees s'affichent le nombre de photos 
inserees ainsi que la duree prevue pour la diffusion du diaporama. 



Editer les photos 

Flash Slide Show Builder inclut un editeur de photos pour effectuer des 
retouches basiques (recadrer, ajuster la luminosite, le contraste et les 
couleurs d'une image...). 



Effectuer des retouches rapides 



1 Pour effectuer rapidement des retouches sur vos photos avant la 
creation du diaporama, double-cliquez sur une vignette au sein de 
la fenetre de selection. L'onglet Edit (Edition) est active 
automatiquement. 




Figure 7.36 : 

Selection des photos du 
diaporama 

2 Dans la colonne de gauche, vous disposez de quatre curseurs pour 
effectuer des retouches rapides : 

— Brightness (Luminosite) : ajuste la luminosite de 1' image. 

— Contrast (Contraste) : corrige les problemes de contraste. 
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Blur (Flou) : augmente ou diminue le flou. 
— Sharpen (Nettete) : accentue la nettete de 1' image. 

3 Pour mieux visualiser les retouches effectuees, cliquez sur les 
boutons Zoom in (Zoom avant) et Zoom out (Zoom arriere). 

4 Si vous souhaitez annuler les transformations effectuees et 
retrouver l'image originale, cliquez sur le bouton Restore 
(Restaurer). 




Figure 7.37 : Edition d'image 



Appliquer des effets 

1 Dans la liste deroulante Photo Filter (Filtres photos), situee dans la 
zone inferieure gauche de la fenetre d' edition, cinq filtres sont 
disponibles : 

_ Old Film (Effet vieux film) : cet effet vieillit la photo. 

— Negative (Negatif) : un effet negatif est applique aux couleurs 
de la photo. 

_ Gray (Gris) : l'image passe en niveau de gris. 

_ White & Black et Black & White (Noir et blanc) : un effet noir et 
blanc est applique. 



Selectionnez l'un des filtres proposes pour 
immediatement un apercu dans la fenetre de droite. 



visualiser 
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Figure 7.38 : 

Selection d'un filtre 



3 Pour appliquer un effet a toutes les photos du diaporama, cliquez 
sur le bouton Apply to all (Appliquer a tous). 



Effet de mouvement 

Les effets de mouvement different des transitions appliquees entre 
chaque photo. II s'agit ici de creer un effet lors de l'affichage de la 
photo. 

1 Pour appliquer des effets de mouvement a la photo, 
selectionnez-la en cliquant sur sa vignette. 

2 Dans la section Photo Motion situee en haute a droite de 
1' interface, selectionnez un effet de mouvement dans la liste 
deroulante (gauche a droite, haut vers bas, etc). 
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Figure 7.33 : 

Ajout d'un effet de mouvement 
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3 Rien n'est modifie dans l'apercu de l'onglet Edit (Edition). Pour 
visualiser l'effet choisi, cliquez sur l'onglet Publish (Publier), 
puis sur le bouton Lecture au sein de la fenetre de 
previsualisation. 

Rotation et recadrage 

1 Pour faire pivoter une image vers la gauche ou la droite, faites 
appel aux boutons 90° Left (90° a gauche) et 90° Right (90° a 
droite). La modification se repercute dans la fenetre d'apercu. 

2 Pour operer une rotation complete (180°), cliquez sur le bouton 
180° Flip. 

3 Si vous souhaitez recadrer une image pour supprimer des 
elements inutiles de l'arriere-plan ou mettre en avant un element 
de la photo, cliquez sur le bouton Crop (Recadrer). 
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Figure 7.40 : Recadrage d'une photo 

4 Maintenez le bouton gauche de la souris enfonce et delimitez la 
zone a conserver au sein de la fenetre d'aperiju. 

5 Lorsque vous etes satisfait, cliquez sur le bouton Done (Effectue), 
qui a remplace automatiquement le bouton Crop. 

Enregistrer une legende audio 

1 Dans la section Audio Record, situee dans la colonne de droite, 
cliquez sur le bouton d'enregistrement symbolise par un rond 
rouge. 
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2 La fenetre d'enregistrement s'affiche avec un apercu de la photo 
selectionnee. Assurez-vous qu'un micro est branche a votre 
ordinateur, puis cliquez sur le bouton Record pour demarrer 
l'enregistrement. 

3 Lorsque l'enregistrement de la legende est termine, cliquez sur le 
bouton Stop. Pour suspendre momentanement l'enregistrement, 
activez le bouton Pause. 

4 Pour ecouter votre legende, cliquez sur le bouton Play (Lecture). 
Vous pouvez ajuster les parametres sonores en cliquant sur le 
bouton Settings. 
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Figure 7.41 : Ajout d'une legende audio 

5 Pour enregistrer une legende pour chacune des photos 
selectionnees du diaporama, cliquez sur le bouton Suivant 
symbolise par deux fleches vertes. 

6 Lorsque vous avez termine l'enregistrement de toutes les photos, 
cliquez sur le bouton Done (Effectue). 
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Inserer du texte 

1 Cliquez sur le bouton Text Settings. Dans la boite de dialogue 
Text Settings, inserez dans la zone de texte Photo Description la 
legende de votre image. 




Figure 7.42 : Insertion d'une legende 

Pour personnaliser la police, la taille et la couleur, cliquez sur le 
bouton Change font. Le texte se placera par defaut sous 1' image. 

Pour inserer un texte anime, cliquez sur l'icone Add situee a droite 
de la zone Funny Text List. Entrez la legende dans le champ de 
texte qui apparait. 

Selectionnez une police dans la liste deroulante Font Type, cochez 
la case Bold (Gras) ou Italic (Italique) pour ajouter un style de type 
gras ou italique au texte. 

Selectionnez une couleur dans la liste deroulante Color ainsi 
qu'une taille de texte dans la liste deroulante Size. 
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Enfin, pour definir le type d'effet a appliquer, choisissez-le dans la 
liste deroulante Funny Text Effect. Un apercu de ces effets speciaux 
est visible dans la fenetre Sample (Exemple). 

Pour placer precisement le texte anime sur 1' image, glissez- 
deplacez-le au sein de la fenetre d' apercu a 1' emplacement de 
votre choix. 
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Figure 7.43 : Ajout d'une legende animee 

8 Pour inserer une legende sur les autres images du diaporama, 
cliquez sur le bouton Suivant symbolise par deux fleches. 

9 Sauvegardez les modifications effectuees en cliquant sur le bouton 
Done (Effectue). 



Definir des transitions 

Les transitions sont des animations lancees lors du passage d'une photo 
a 1' autre. Flash Slide Show Builder inclut une centaine de transitions. 

1 Pour choisir les transitions du diaporama, cliquez sur l'onglet 
Effect (Effet). Dans la colonne de gauche, choisissez une 
transition, puis double-cliquez dessus. 
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Figure 7.44 : Apercu des transitions disponibles sous I'onglet Effet 

2 Si une transition vous plait, glissez-deplacez-la sur l'icone situee 
entre les vignettes. Le chiffre indique en dessous correspond a la 
duree de la transition, par defaut 2secondes. Si vous souhaitez 
allonger ou raccourcir ce delai, cliquez sur le chiffre pour le modifier. 
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Figure 7.45 : 

Insertion d'une transition entre 
deux images du diaporama 



3 Pour modifier la duree de l'affichage, definie par defaut a 
3 secondes, cliquez sur le chiffre 3 situe sous la vignette de 
selection et entrez le chiffre de votre choix. 

4 Si vous souhaitez appliquer la meme transition a 1' ensemble du 
diaporama, selectionnez la vignette de transition, puis cliquez sur 
le bouton Apply to all (Appliquer a tous). 

5 Pour utiliser des transitions differentes dans le diaporama, cliquez 
sur le bouton Randomize all (Mode aleatoire). 



Selectionner un theme 

Le theme correspond a l'habillage graphique utilise pour le diaporama. 
Les graphismes s'averent agreables et couvrent de nombreux domaines 
tels que le sport, les voyages ou la vie professionnelle. 
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Dans la colonne de gauche, selectionnez le theme correspondant a 
vos attentes. Un apercu s'affiche a droite. 

Chaque theme est constitue de trois parties distinctes accessibles 
via un onglet : 

— Template (Modele) : donne un apercu du modele choisi et des 
pages interieures du diaporama. 

— Opening Movie (Animation d'ouverture) : comme un film, 
chaque diaporama est compose d'une petite scene d' introduction 
que vous pouvez visualiser en cliquant sur cet onglet. 

— Ending Movie (Animation de fin) : affiche V animation de fin du 
diaporama. 

Notez que, lors de la publication finale, vous pourrez choisir de 
conserver ou non ces animations de debut ou de fin. 
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Figure 7.46 : Choix d'un theme 



Ajouter une musique de fond 

1 Si vous cliquez sur I'onglet Template, la colonne de droite permet 
de selectionner une musique de fond qui accompagnera le 
diaporama. 



LE GUIDE COMPLET 



353 



Chapitre 7 



Du Flash... sans Flash 



2 Cliquez sur le bouton + pour selectionner un morceau musical sur 
votre ordinateur. Choisissez un fichier au format MP3 et WAV, 
puis cliquez sur le bouton Ouvrir. 

3 Vous pouvez utiliser un seul morceau en guise de musique de 
fond ou en compiler plusieurs en cliquant a chaque fois sur le 
bouton +. 

4 Pour modifier l'ordre des morceaux, selectionnez le morceau a 
deplacer, puis cliquez sur les boutons symbolises par une fleche vers 
le haut ou une fleche vers le bas. Si vous souhaitez effacer un 
morceau, selectionnez-le dans la liste et cliquez sur le bouton - . 



Background Music 



Music File 



Air Talkie Walki 
Air T alkie Walki 
Air Talkie Walki 
Air Talkie Walki 
Air Talkie Walki 
Air Talkie Walki 
Air Talkie Walki 
Air Talkie Walki 
Air Talkie Walki 
Air Talkie Walki 



1 Venus. mp3 
Alone in Kyoto.. 



Biological. rnp3 
Cherry Blossom.. 
Run.mp3 
Mike MiHs.mp3 
Universal Trav... 
Surfin'onaRo.. 

7 Another Day.m.. 

8 Alpha Beta Ga... 



SB KB Advanced | 

Background music Mode" ~i 

Accurately synchronize audio and 
flash slideshow. 



Figure 7.47 : 

Organisation des morceaux 
musicaux 
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Pour ecouter le fond musical, cliquez sur le bouton Advanced 
(Avance). La duree totale des morceaux inseres s'afflche. 

Ajustez le volume en deplacant la reglette correspondante et 
cliquez sur le bouton Lecture pour ecouter vos morceaux. Si vous 
etes satisfait, cliquez sur le bouton Done (Effectue). 



■ 



Add and Trim Background Music 
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DONE 



Figure 7.48 : Definition de la duree du fond sonore 

7 Pour synchroniser musique et diaporama, cochez la case 
Accurately synchronise audio and flash slide show (Synchroniser 
exactement diaporama Flash et fond sonore). 

Personnaliser les animations 

1 Pour chaque theme, le texte des animations de debut et de fin peut 
etre personnalise. Cliquez sur l'onglet Opening Movie situe sous 
la fenetre d'apercu. 

2 Dans la colonne de droite, cliquez dans le champ Tite (Titre), 
selecti onnez l e titre par defaut, supprimez-le en appuyant sur la 
touche [Supprl , puis remplacez-le par votre propre texte. 
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Template v Opening Movie 




Figure 7.49 : 

Personnalisation 
de lecran de 
demarrage 



3 Effectuez la meme operation dans les champ Label (Etiquette) et 
Autor (Auteur) pour les modifier. 

4 Cliquez sur l'onglet Ending Movie et modifiez les champs Label et 
Cast View (Realisateur). Les modifications effectuees se 
repercutent immediatement au sein de la fenetre d'apercu. 
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Figure 7.50 ; Modification des para metres de texte au sein de lecran 
de demarrage 



Personnaliser un theme 

Si vous ne trouvez pas votre bonheur parmi les themes proposes, vous 
avez la possibilite de personnaliser un theme avec 1' application. 

Definir la taille de I'animation 

1 Cliquez sur le bouton Customize Theme situe sous la liste des 
themes. 

2 La boite de dialogue Theme Size Setting (Definition de taille) 
apparait. 
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Please set the scene size of theme 




pefauit Size! 
O Custom Si2e 


1 720 "540 _▼] 




Width f" Height f 



OK 



Cancel 









Figure 7.51 : Modification de la taille de I'animation 

3 Par defaut, le parametre Default Size (Taille par defaut) est active. 
Vous pouvez selectionner dans la liste deroulante deux autres 
tailles predefinies ou cochez Custom Size pour personnaliser la 
largeur et la hauteur. Validez par un clic sur le bouton OK. 

Modifier Mapparence du theme 

1 La boite de dialogue Theme Designer s'affiche. Cet ecran permet 
de personnaliser I'animation de demarrage du diaporama. 

2 Dans la section Background Mode (Type d'arriere-plan), vous 
pouvez specifier dans la liste Type une couleur (Color) ou une 
image (Picture). 

3 Si vous selectionnez Picture, la fenetre Ouvrir s'affiche. Le dossier 
Background situe dans le repertoire d' installation de Flash Slide 
Show Builder reunit quatre arriere-plans que vous pouvez utiliser 
au sein de vos themes. Selectionnez l' image de votre choix, puis 
cliquez sur le bouton Ouvrir. 

4 Vous pouvez egalement creer vos propres images a condition 
qu'elles soient au format JPEG. A cette fin, utilisez un logiciel de 
retouche d' images, puis enregistrez votre arriere-plan au sein du 
repertoire Background. 



LE GUIDE COMPLET 



357 



Chapitre 7 



Du Flash... sans Flash 




Figure 7.52 : 

Selection d'une 
image d'arriere-plan 
pour un theme 
personnalise 



RENVOI 



8 



Pour plus d' informations sur la creation d y images JPEG, 
reportez-vous au chapitre Optimiser des images pour le Web. 

Pour modifier la position de 1' image d'arriere-plan, selectionnez 
une option dans la liste deroulante Position. 

Si vous preferez opter pour une couleur d'arriere-plan, choisissez 
Color dans la liste deroulante Type, puis selectionnez une couleur 
dans la liste deroulante situee juste en dessous. 

Dans la colonne de droite, vous pouvez ajouter un clipart dans les 
bibliotheques d'elements proposes. Glissez-deplacez un clipart 
vers la fenetre d'apercu pour linserer. 

Si vous souhaitez ajouter davantage de cliparts, selectionnez une 
categorie dans la liste deroulante situe au-dessus. 




Figure 7.53 : 

Utilisation de 
cliparts au sein d'un 
theme personnalise 
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9 Pour inserer un clipart issu de votre ordinateur, cliquez sur le 
bouton More (Plus). Selectionnez un clipart au format JPEG ou 
SWF (format Flash), puis validez par un clic sur le bouton Ouvrir. 

10 Pour ajouter du texte, cliquez sur le bouton Add Text (Ajouter du 
texte). Inscrivez votre texte dans le champ Text. 

11 Pour le placer sur la scene, entrez ses coordonnees dans les 
champs OriginX et OriginY ou glissez-deplacez-le directement au 
sein de la fenetre d'apercu. 

12 Pour agrandir/diminuer la taille du texte ou effectuer une rotation, 
deplacez les curseurs Scale et Rotate vers la gauche ou la droite. 

13 Dans la liste deroulante Effect (Effet), selectionnez un effet pour le 
texte. Specifiez ensuite la police au sein de la liste deroulante 
Font. Puis indiquez la couleur, la taille et, si necessaire, un style 
en cochant les cases Bold (Gras) ou Italic (Italique). 

14 Pour reinitialiser tous les reglages, cliquez sur le bouton Reset. 




Text (Presentation Effect 

OriginX [262 OriginY [384 
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Size |T8~3 □ italic 



Figure 7.54 : Ajout de texte anime 

15 Lorsque vous avez termine la personnalisation de 1' animation 
d'ouverture, cliquez sur 1'onglet Template. Le parametrage est 
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relativement similaire. Une liste deroulante supplemental, situee 
dans la section Photo Frame, vous permet de choisir un cadre pour 
vos photos. 

IB Enfin, cliquez sur l'onglet Ending Movie et affectez les parametres 
necessaires. La configuration de 1' animation de fin est comparable 
a celle de 1' animation d'ouverture. 

17 Lorsque vous avez termine, cliquez sur l'onglet Export. Cochez le 
bouton radio Export to Wondershare Slide Show Builder Theme 
(Exporter en tant que theme pour Flash Slide Show Builder). 
Donnez un nom a votre theme, puis enregistrez-le. 

18 Fermez la fenetre et sauvegardez-le. Le theme nouvellement cree 
est automatiquement ajoute a la liste des themes. 

Publier le diaporama 

Apres avoir configure votre diaporama, il ne reste plus qu'a 1' exporter. 
L' application propose de multiples formats d' exportation pour une 
publication sur le Web, mais aussi en tant que fichier Flash autonome, 
executable ou ecran de veille. 

Definir les parametres de publication 

1 Cliquez sur l'onglet Publish (Publier). Pour immediatement 
visualiser un premier apercu du diaporama, cliquez sur le bouton 
Lecture sitae dans la fenetre Preview (Previsualiser). Le 
processus de previsualisation demarre et peut prendre quelques 
secondes ou minutes selon le nombre de photos contenues dans le 
diaporama. 

2 Pour definir les parametres de publication de 1' animation, cliquez 
sur le bouton Setting (Parametre). La boite de dialogue Setting 
apparait. 

3 Dans la section Loop Option (Boucle), trois options sont a votre 
disposition : 

_ Loop Automatically (Boucle automatiquement) : c'est l'option 
proposee par defaut. L' animation tournera en boucle. 

_ Keep the "Play again" (Rejouer 1' animation) : a la fin de 
1' animation, il sera possible de la rejouer en cliquant sur un 
bouton. 

_ No Loop (Pas de boucle) : 1' animation n'est pas rejouee. 
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4 Dans la section Other Setting (Autre parametre), cochez/decochez 
les options de votre choix : 

— Include Opening Movie & Ending Movie (Inclure animations 
d'ouverture et de fin) : pour conserver les animations 
d'ouverture et de fin. 

— Dislpay the preloader when loading Flash Movie (Afficher une 
animation de prechargement lors du lancement de 1' animation 
Flash) : cette option, decochee par defaut, est pourtant 
conseillee pour une publication sur Internet. Lors du 
chargement de votre animation, une barre de chargement 
s'affichera pour indiquer precisement le temps restant avant le 
lancement du diaporama. 

— Play with control bar (Jouer avec la barre de controle) : cette 
option affiche les boutons Lecture, Precedent et Suivant. Si 
vous decochez cette option, 1' animation sera automatiquement 
jouee en mode Diaporama, sans que le lecteur puisse intervenir 
lors de son deroulement. 
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Figure 7.55 : Les options de publication de Flash Slide Show 
Builder 
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Enfin, le curseur Image conversion quality (Optimisation d' images) 
permet de definir la compression a appliquer a vos photos pour 
optimiser le poids final de l'animation. Plus la valeur entree est 
importante, plus la qualite est optimale et le poids important. 
Cliquez sur le bouton OK pour enregistrer les modifications. 



REMARQUE 



Sauvegarder le projet en cours 

Si vous ne souhaitez pas publier immediatement votre diaporama, 
cliquez sur l'icone Save pour enregistrer votre projet afin d'y revenir 
ulterieurement. 



Choisir un format d'exportation pour le Web 

De multiples formats d'exportation sont proposes par 1' application. Mais 
nous allons plus specialement nous interesser au format approprie pour 
Internet. 

Publication au format Flash 

1 Si vous souhaitez inserer votre diaporama dans une page web 
existante, cliquez sur le bouton Publish as SWF (Publier en tant 
que SWF). 

2 SWF correspond a 1' extension des animations Flash pretes a une 
publication sur le Web. Nommez votre animation, puis cliquez sur 
le bouton Enregistrer. 

3 Faites ensuite appel a un logiciel d' edition web tel que 
Dreamweaver pour importer l'animation dans une page web. 



REMARQUE 



Publication immediate depuis Flash Slide Show Builder 

Si vous cliquez sur le bouton Publish as Online Album, un Assistant 
vous guide pas a pas dans la publication de votre diaporama au sein de 
votre site web. Pour l'utiliser, vous devez etre prealablement enregistre 
sur le site de l'editeur. 



RENVOI 



Pour plus d'informations sur la creation de pages web avec 
Dreamweaver, reportez-vous au chapitre Aller plus loin avec 
Dreamweaver. 
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Publication au format HTML 

1 Pour publier une page HTML avec le diaporama Flash, cliquez 
sur le bouton Publish as HTML (Publier en tant que fichier 
HTML). 

2 Une page HTML contenant l'animation Flash est 
automatiquement generee. Double-cliquez sur la page HTML 
obtenue pour la lancer dans le navigateur. 

3 Par defaut, la page HTML possede un fond blanc, mais vous 
pouvez personnaliser son apparence en faisant appel a un editeur 
web. 



I — "Publish Setting 
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Figure 7.56 : Les differents formats d'exportation 
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REMARQUE 



Les a utres formats d'exportation 

Flash Slide Builder Show propose egalement de publier votre 
diaporama au format EXE. Principal avantage de ce format, le Flash 
Player n'est pas necessaire. Le diaporama s'installe sur 1'ordinateur 
comme n'importe quelle application. Autre possibility : generer un ecran 
de veille a partir de votre diaporama en cliquant sur le bouton Publish as 
Screen Saver (Publier en tant qu'ecran de veille). 



7.6. Transformer des videos en 
animations SWF 

Transformer rapidement des videos au format Flash, c'est possible grace 
a une application poids plume nommee Video to Flash Converter, 
telechargeable sur le site de son editeur a l'adresse www.geovid.com. 

Principal avantage du format Flash, le Player indispensable pour 
visualiser les animations realisees sous ce format est integre 
automatiquement dans les dernieres versions des principaux navigateurs, 
alors que la plupart des fichiers video necessitent le telechargement d'un 
plug-in complementaire. 



Selectionner la video 

1 La fenetre Video to Flash Converter est minimaliste. Dans le 
champ Input File (Fichier d' entree), indiquez le chemin vers la 
video a convertir en cliquant sur le bouton .... 

2 Choisissez un fichier video sur votre ordinateur. La majorite des 
formats utilises (AVI, ASF, MOV, MPEG) sont reconnus. Cliquez 
sur le bouton Ouvrir. 

3 Dans le champ Output File (Fichier de sortie), le chemin du fichier 
qui va etre genere au format Flash apparait. II porte par defaut 
l' extension .swf. 
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Video To Flash Converter 



File Settings Help 
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Video 
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Video stream: 320x240, 15.000 fps, 24.733 sec 
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HTML Generate HTML Q 



Start 



I Ready 



Figure 7.57 : Selection de la video a convertir au format Flash 



Definir les parametres d'exportation 

1 Dans la section Type, vous pouvez opter pour le format SWF ou le 
format FLV. Le format FLV (Flash Video Streaming) offre 
1' avantage d'une lecture en streaming : meme si la video n'est pas 
totalement chargee, les premieres images seront quand meme 
lancees au sein du navigateur. 

2 Cliquez sur le bouton Video Settings. Quelle que soit F option 
choisie dans la section Type, la meme fenetre apparait. Definissez 
la qualite d' image souhaitee en deplacant le curseur Quality. Plus 
la valeur est grande, plus le poids est eleve. 
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Video Settings 
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Figure 7.58 : 

Definition des 
parametres video 



Augmentez ou diminuez la vitesse de lecture avec le curseur 
Framerate ainsi que le nombre d' images cles. Si vous diminuez 
cette valeur, votre video sera plus rapide a telecharger mais moins 
nette. Enregistrez vos parametres en cliquant sur le bouton OK. 

Dans le champ Duration (Duree), vous pouvez diminuer la duree 
de r animation en cliquant sur les fleches dirigees vers le haut et le 
bas sises a droite du champ de texte. 

Pour compresser la bande sonore de la video, cliquez sur le 
bouton Audio Settings (Configuration audio). Deplacez les 
curseurs de compression et de qualite selon vos besoins, puis 
validez par un clic sur le bouton OK. 
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Figure 7.59 : 

Definition des 
parametres audio 
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Publier la video au format Flash 

1 Enfin, une option de publication HTML est proposee pour integrer 
directement la video dans une page web avec detection du PLayer 
Flash automatique. U suffit de cocher la case Generate HTML 
(Generer un fichier HTML). Si vous souhaitez integrer la video 
dans une page web existante, decochez cette option. 

2 Pour afficher plus d' options, cliquez sur le bouton .... Laissez 
cochee 1' option With Flash Player (Avec le Flash Player). 

3 Cochez la case Auto play (demarrage automatique) pour lancer 
automatiquement la video au chargement de la page web. 

4 Decochez 1' option Loop pour eviter que la video ne boucle 
indefiniment, puis validez par un clic sur le bouton OK. 

5 Cliquez sur le bouton Start pour demarrer la conversion. Celle-ci 
peut durer quelques secondes ou quelques minutes selon le poids 
du fichier video initial et la puissance de votre ordinateur. 

6 Lorsque 1' exportation est terminee, un aper5u de la video s'affiche 
au sein de la page HTML. 
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Figure 7.60 : 

Definition des parametres audio 



I W^ P° ur pl us d' informations sur Vinsertion de videos avec Flash, 
! renvoi reportez-vous au chapitre Creer des animations pour le Web 
avec Flash. 



LE GUIDE COMPLET 367 



Chapitre 7 



Du Flash... sans Flash 



7.7. Les points essentiels a retenir 

Creer un site interactif au graphisme reussi avec Flash, c'est possible 
meme si vous n'avez jamais cree de site web auparavant, et ce grace aux 
nombreux outils proposes sur Internet. Neanmoins, pour mettre toutes 
les chances de reussite de votre cote, n'oubliez pas les points suivants : 

Avant de vous lancer dans la construction de votre site, prenez le 
temps de reflechir a son arborescence et ne delaissez pas le fond 
au detriment de la forme. 

Avant d'acheter une interface en ligne, pensez a 1' evolution de 
votre site a court et a moyen terme. 

Les sites en Flash ont tendance a disperser 1' attention de 
l'internaute en raison des animations mises a disposition. Comme 
pour n'importe quel site, soyez attentif a la navigation afin que 
votre page web soit aussi agreable a regarder qu'a parcourir. 

Surveillez le poids de votre page. Flash permet de compresser 
automatiquement les images. Neanmoins, verifiez le poids de 
I' animation avant sa mise en ligne. 

N'oubliez pas le processus de referencement. Optimisez le code 
HTML pour etre mieux repere par les robots des moteurs de 
recherche. 




Optimiser 

des images 

pour le Web 
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Pour ameliorer le referencement d'un site publie au format 
Flash, reportez-vous au chapitre Referencer un site web. 



Retoucher des images avec Picasa 370 

Publier des photos en ligne avec Picasa 380 

Compresser des images pour le Web 388 

Creer des elements graphiques pour un site web 405 

Realiser un arriere-plan 41 3 

Atelier : Un menu pour le Web 430 
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Avant de publier des images sur Internet, il est necessaire de les traiter 
avec un logiciel de retouche d' images. De nombreuses applications 
proposent egalement la creation facilitee de galeries photos en ligne ou 
de montages photos pour rendre vos cliches plus attrayants. L'etape 
d' optimisation consiste ensuite a compresser les images pour eviter que 
leur chargement sur Internet soit trop long. 

8-1 - Retoucher des images avec Picasa 

La retouche d' images ne necessite pas de logiciels couteux et difficiles a 
prendre en main. Images decentrees, mal cadrees, sombres ou au 
contraire surexposees, le logiciel Picasa les ajuste pour une publication 
reussie sur Internet. 

Desormais a la portee de tous avec l'explosion du numerique, Picasa, 
une application gratuite et en francais a la prise en main intuitive, 
propose de nombreuses fonctions de retouche basiques et de creations 
destinees au Web, mais s'avere egalement un gestionnaire d' images 
puissant, qui vous aidera a organiser toutes vos photos. 



Installer Picasa 

1 Ouvrez votre navigateur Internet et rendez-vous a l'adresse 
http://picasa.gOOgle.fr pour telecharger le logiciel. Selectionnez un 
emplacement sur votre ordinateur, puis cliquez sur le bouton 
Enregistrer pour demarrer la sauvegarde sur votre disque dur. 
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vos photos. 
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Figure 8. 1 : 

Picasa est un logiciel 
de traitement 
d'images gratuit 
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2 Double-cliquez sur 1' executable pour demarrer 1' installation. 
Avant tout, vous devez accepter les conditions d'utilisation. Apres 
les avoir lues, cliquez sur le bouton J'accepte. 

3 Par defaut le dossier d' installation de 1' application est C:\Program 
Files\Picasa2. Si vous souhaitez modifier ce dossier par defaut, 
cliquez sur le bouton Parcourir pour selectionner un nouvel 
emplacement. 

4 Verifiez, au sein de la fenetre d' installation, que vous disposez 
d'un espace suffisant pour installer Picasa, puis cliquez sur le 
bouton Installer. 

5 Dans la fenetre d'installation, cliquez sur le bouton Fermer. Par 
defaut, Picasa 2 se lance automatiquement. 



Importer des photos 

1 Pour le moment, 1' interface de Picasa 2 est vide. Cliquez sur le 
bouton Importer pour selectionner sur votre ordinateur vos 
photos. 

2 Cliquez ensuite sur le bouton Selectionner un peripherique pour 
selectionner le peripherique (ordinateur, carte memoire, cle USB, 
appareil photo numerique...) depuis lequel vous souhaitez 
importer les photos. 

3 Cliquez sur la commande Dossier, puis selectionnez le dossier 
contenant les photos. Validez par un clic sur le bouton Ouvrir. 



ttf isssr 




Figure 8.2 : 

Importation 
d'images 
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4 Apres 1' importation de vos photos, cliquez sur le bouton Terminer 
pour revenir a 1' interface principale. La fenetre Terminer 
■'importation s'affiche. Inserez un titre pour votre dossier, puis 
entrez si vous le souhaitez un lieu, une date et la legende du 
dossier. Cliquez sur le bouton Terminer. 




Pour terminer ('importation des photos, entrez le titre du dossier. 



Titre : 



Voyage au Japon 



Supprimei ales de la so iportation terminee 

Lieu (facultatif) : Date : 

L ZZ 

Legende du dossier (facultatif) : 



21/09/2006 



Visite de Tokyo - Mai 2005 








Aide 


Terminer 


Annuler 





Figure 8.3 : informations sur ies images importees 

Les images importees s'affichent sous forme de vignettes. Vous 
pouvez maintenant les classer et les retoucher a l'aide du logiciel 
Picasa. 



Redresser I'image 

La commande Redresser permet d'ajuster les images decentrees, erreur 
frequente des photographes debutants, mais facilement reparable avec 
un logiciel de retouche d' images tel que Picasa. 
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Double-cliquez sur la vignette de la photo que vous souhaitez 
redresser. La colonne de gauche propose maintenant trois onglets 
destines a realiser rapidement des retouches. 

Restez sur l'onglet Ret. simples et cliquez sur le bouton 
Redresser. Un quadrillage apparait sur votre image pour vous 
permettre de reperer plus facilement l'axe a respecter. 

Deplacez le bouton situe sur la reglette vers la gauche ou la droite 
pour redresser votre image. La manipulation est intuitive et 
permet de verifier immediatement 1'alignement des elements de la 
photo par rapport au quadrillage affiche. Lorsque vous etes 
satisfait, cliquez sur le bouton Appliquer. 




Figure 8.4 : Une image red r esse e avec Picasa 

Le quadrillage disparait. Votre image est maintenant redressee. La 
modification est automatiquement enregistree dans Picasa. 
Cliquez sur le bouton Retour a la Galerie pour revenir a 1' interface 
principale contenant toutes les vignettes des photos. 



Sauvegarder les images retouchees sur un ordinateur 

Apres que vous avez effectue une retouche dans Picasa, la mise a jour 
apparait automatiquement au sein du logiciel, mais les images originales 
situees sur votre ordinateur ne sont pas modifies. 

Pour enregistrer les images retouchees sur votre ordinateur sans pour 
autant ecraser les fichiers originaux, cliquez sur le bouton Exporter situe 
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dans la partie inferieure de 1' interface. Un nouveau dossier contenant 
les images modifiees est cree a 1' emplacement de votre choix. 



Recadrer I'image 



La commande Recadrer permet de supprimer les elements inutiles d'une 
photo ou de mettre en valeur Tun d'entre eux. 

1 Double-cliquez sur la vignette a recadrer, puis cliquez sur le 
bouton Recadrer situe sous l'onglet Ret. simples. 

2 Cochez le bouton radio Manuel, puis maintenez le bouton gauche 
de la souris enfonce pour delimiter la zone de la photo a recadrer. 




Figure 8.5 : Recadrage d'une photo 

Pour ajuster la zone a recadrer, placez votre souris sur les 
differentes sections du cadre tout en maintenant le bouton gauche 
enfonce. De cette facon, vous pouvez agrandir ou diminuer la 
taille de selection. Lorsque vous etes satisfait, cliquez sur le 
bouton Appliquer. 

La modification est immediate et automatiquement enregistree 
dans Picasa. Cliquez sur le bouton Retour a la Galerie pour 
revenir a 1' interface principale. 
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Annuler une action 

MMAMUE ~. . . 

Si vous souhaitez annuler une retouche effectuer avec Picasa, il suffit 
de cliquer sur le bouton Annuler situe sous l'onglet Ret. simples apres 
avoir recadre votre image. Ce bouton s'actualise automatiquement en 
fonction de la derniere action effectuee. En cliquant successivement 
dessus, vous pouvez annuler toutes les retouches effectuees sur I'image 
pour revenir au cliche original. 



Ajuster la luminosite et le contraste 

Manque de lumiere, contre-jour ou surexposition, les options de 
luminosite et de contraste de Picasa rectifient les problemes de prise de 
vue. 

1 Apres avoir selectionne votre photo, cliquez sur le bouton J'ai de 
la chance sous l'onglet Ret. simples. Ce bouton effectue une 
analyse globale de I'image pour rectifier automatiquement et 
rapidement eclairage et couleurs. 

2 Si vous etes satisfait, conservez les reglages obtenus. Dans le cas 
contraire, cliquez sur le bouton Annuler j'ai de la chance pour 
revenir a I'image originale. 




Figure 8.6 : Le bouton J'ai de la chance recti fie automatiquement les 
problemes d'eclairage et de couleur 
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Si vous souhaitez uniquement modifier 1' exposition de la photo 

sans ajuster les couleurs, cliquez sur le bouton Contraste auto. 

A l'inverse, pour retoucher les couleurs de 1' image sans toucher a 

1' exposition, cliquez sur le bouton Couleur auto. 

Si ces reglages restent insuffisants, cliquez sur l'onglet Reglages 

pour aller plus loin dans la precision des reglages de couleur et de 

lumiere. 

Pour une photo trop sombre, deplacez le curseur Eclairage 

d'appoint vers la droite. Pour accentuer les tons clairs, deplacez le 

curseur Tons clairs vers la droite. Pour augmenter le contraste, 

deplacez le curseur Ombres. 



ASTUCE 



Visualiser les details d'une photo 

Pour acceder a une zone precise de votre photo, aidez-vous de la 
loupe situee dans le coin inferieur droit. Ainsi, vous visualiserez mieux 
la zone a corriger. Vous pouvez egalement cliquer sur le bouton 
Histogramme situe a droite de la loupe pour mieux controler les 
informations de couleur de votre photo. 



6 Enfin, pour rechauffer les couleurs (plus de rouge) ou inversement 
(plus de bleu), deplacez le curseur Temperatures de couleur. 



T^TT 




Figure 8.7 : Le curseur Temperatures de couleur modifie les 
couleurs de I'image 
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7 Pour enregistrer les modifications dans Picasa et revenir a 
1' interface principale, cliquez sur le bouton Retour a la Galerie. 



Corriger les yeux rouges 

Les yeux rouges sont un defaut frequent qui peut gacher un cliche par 
ailleurs reussi. Pour le corriger rapidement, vous disposez d'une 
fonction dediee. 

1 Apres avoir selectionne I'image a corriger, double-cliquez dessus 
et activez le bouton Yeux rouges sous l'onglet Ret. simples. 

2 Maintenez le bouton gauche de la souris enfonce pour 
selectionner precisement la partie correspondant aux yeux rouges. 
La correction est automatiquement lancee. 



Ret simples 



R6.ii.iq.". 



Effets 



Recadrei 



RcdtassM 



Yeux rouges 



b 



Corriger les yeux rouges dans cette photo 
Contraste auto 

Couleur auto 

Fxlalragetfappoini 



Annuler Yeux rouges 



- 



Figure 8.8 : 

Correction 
des yeux 
rouges 



3 Si le premier essai n'est pas concluant et que vous souhaitiez 
recommencer la correction des yeux rouges, cliquez sur le bouton 
Annuler. 
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4 Cliquez sur le bouton Appliquer si vous etes satisfait des 
modifications apportees, puis cliquez sur le bouton Retour a la 
Galerie pour retrouver 1' interface principale de Picasa. 



Creer des effets speciaux 

Apres les retouches standard destinees a corriger les imperfections de 
vos photos, vous pouvez ajouter un peu de fantaisie a vos cliches grace 
aux effets proposes par Picasa. 

1 Double-cliquez sur la vignette de votre choix, puis activez 
l'onglet Effets. 

2 Douze effets sont a votre disposition. lis vous permettront de 
transformer votre photo couleur en photo noir et blanc, d' ajouter 
un aspect sepia ou des effets de couleur. Un apercu de chaque 
effet s'affiche sous forme de vignette. 

3 Cliquez sur un effet pour visualiser un apercu en taille reelle dans 
la fenetre de previsualisation situee a droite. 




Figure 8.3 : Ajout d'un effet sepia a une photo en couleur 

4 Si vous etes satisfait, cliquez sur le bouton Retour a la Galerie 

pour enregistrer les modifications au sein du logiciel Picasa. Dans 
le cas contraire, vous pouvez annuler 1' effet en cliquant sur le 
bouton Annuler. 
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Une fois la photo corrigee, elle est prete a une publication sur le Web. 
Picasa permet d' enregistrer facilement une photo au format JPEG. 



||i Ce format est decrit dans la section Compresser des images 
renvoi pour le Web de ce chapitre. 

1 Pour enregistrer la photo retouchee a l'aide de Picasa sur votre 
ordinateur, selectionnez sa vignette, puis cliquez sur le bouton 
Exporter. 

2 La fenetre Exporter vers le dossier s'affiche. Cliquez sur le 
bouton Parcourir pour choisir 1' emplacement de stockage de votre 
image. 

3 Nommez le dossier dans lequel va etre placee la photo. Deux 
options de taille sont proposees : 

— Utiliser la taille d'origine permet de conserver les dimensions 
originales de la photo. Pour une page web, n'excedez pas des 
dimensions de 800 pixels de large pour eviter a l'internaute 
une periode de chargement trop longue et 1' utilisation des 
barres de defilement de son navigateur pour visualiser la 
photo. 

— Redimensionner au format permet d'ajuster la taille de la photo. 
N'augmentez jamais la taille d'une photo car vous y perdriez 
en qualite. Mais vous pouvez diminuer sa taille selon vos 
besoins. 

En utilisant la reglette, vous acceder aux tallies predefinies par 
Picasa (320 pixels, 480 pixels, 640 pixels, 800 pixels et 
1 024 pixels). Pour definir une valeur personnalisee, il suffit de 
cliquer dans le champ de texte et de la saisir. 

4 Dans la section Qualite d'image, deplacez la reglette pour definir 
une qualite entre et 100 %. Plus le pourcentage est bas, plus le 
poids de la photo sera faible, mais au detriment de la qualite. 
Inversement, avec une valeur proche de 100 %, la qualite sera au 
rendez-vous, mais le poids plus important. Generalement, une 
valeur de 70 % constitue une bonne moyenne (voir Figure 8.10). 

5 Validez par un clic sur le bouton OK. La photo est enregistree 
dans le dossier specifie. Pour la publier sur le Web, ouvrez une 
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page HTML avec un editeur web tel que Dreamweaver, puis 
utilisez la fonction d' insertion d' images. 




Figure 8. 10 : 

Exportation d'une photo 
pour le Web avec 
Picasa 



& y Pour plus d'informations sur Vinsertion d'images avec 
ircjwi Dreamweaver, reportez-vous au chapitre Alter plus loin avec 
Dreamweaver. 



8.2. Publier des photos en ligne 
avec Picasa 

Picasa propose plusieurs solutions de mise en ligne rapide de vos 
photos. 

Publication immediate sur un blog 

Picasa a noue un partenariat avec la plateforme d'hebergement Blogger 
pour vous permettre de publier rapidement vos images sur le Web. 
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1 Apres avoir effectue les modifications necessaires, selectionnez la 
vignette de votre photo dans Picasa, puis cliquez sur le bouton 
Blog this (Publier sur un blog). 




1600x1200 pixels 726 Ko 



* *-■ 

Imprimer E-mail M o nta pt 



Bloojhis! 



Commander Exporter 



Figure 8.11 : Publication d'une image sur une plateforme de blog 

2 Picasa se rend automatiquement sur la page d'accueil de Blogger. 
Creez un nouveau compte ou identifiez-vous pour acceder au 
tableau de bord. 

3 Selectionnez un alignement et une taille pour l' image 
selectionnee, puis cliquez sur le bouton Enregistrer les 
parametres. 

4 La photo s'insere automatiquement dans un nouvel article. Entrez 
un titre et votre texte, puis cliquez sur le bouton Publier. L' image 
est maintenant accessible a tous les internautes depuis la page 
d'accueil de votre blog (voir Figure 8. 12). 



Pour plus d' informations sur la publication d'un blog avec 
Blogger, reportez-vous au chapitre Creer un blog en ligne. 
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S Picasa: BlogThis! 



B Blogger 



Nom du blog : jcar net de voyage _y.i 



Tilie jSancluair* lie lite da Miyajima | 



JaUTML i Rediger 

Prwrfew 




Visite sur ltle de Miyajima, reputee pour ses 
daims en liberte et son superbe sanctuaire 
flottant recouvert a maree haute. 



► t^mop-ci^m m, ^ . WW* m 
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Figure S.12 ; Insertion d'une image dans Blogger 

Creer un montage photo 

Picasa permet d' exporter plusieurs images pour le Web avec des effets 
speciaux de type Pile de photos pour presenter de facon originale des 
cliches sur un site Internet. 

1 Dans 1' interface principale de Dreamweaver, selectionnez les 
vignettes a utiliser pour le montage photo tout en maintenant la 
touche [Ctrl] enfoncee. 

2 Quatre a cinq photos sont generalement conseillees. Les photos 
selectionnees s'affichent dans le coin inferieur gauche de 
l' interface. Cliquez sur le bouton Montage. 
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Figure 8. 13 : Selection d'images pour un montage photo 

3 La fenetre Realiser le montage s'affiche. Dans la liste deroulante 
Type, selectionnez Pile de photos. D'autres options sont egalement 
a votre disposition permettant de creer une mosaique, une planche 
contact ou d'appliquer un effet.de surimpression, mais elles 
s'averent globalement moins reussies que l'effet Pile de photos. 

4 Dans la liste deroulante Options, vous pouvez opter pour un 
arriere-plan de couleur noire, blanche ou grise, mais aussi choisir 
d'utiliser une des images selectionnees comme arriere-plan. 

5 Dans la liste deroulante Emplacement, plusieurs options sont 
proposees : 

— Enregistrer sous forme de fond d'ecran : V image creee avec 
Picasa sera installee comme fond d'ecran sur votre Bureau 
Windows. 

— Dossier actuel : le montage photo est enregistre dans le dossier 
contenant les images selectionnees. 

— Dossier de photos d'ecran de veille : le montage photo sera place 
dans le dossier de photos d'ecran de veille et s'affichera lors de 
la mise en veille de votre machine. 

— Selectionner un dossier : choisissez un dossier sur votre 
ordinateur en cliquant sur le bouton Selectionner. Par defaut, 
le dossier Mes images est active. 

Choisissez cette derniere option en indiquant le dossier 
correspondant a votre site web. 

6 Validez les options definies dans la fenetre Realiser le montage 
par un clic sur le bouton Creer. 



i^JE Bt^iku 


m*~ 


i> & 





Figure 8. 14 : Definition des parametres de montage 
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7 La creation du montage prend quelques secondes, puis il s'affiche 
en taille reelle. Votre montage est maintenant une photo comme 
les autres, qui peut etre exportee dans un dossier ou publier sur un 
blog. 




Figure 8.15 : Apercu du montage Pile de photos 



Creer un diaporama photo 

Vous pouvez publier rapidement votre album photo sans editeur web et 
sans passer du temps a realiser une interface graphique. A cet effet, 
Picasa propose la creation de galeries photos en ligne. Apres creation de 
votre album, vous n'aurez plus qu'a le transferer sur votre serveur web 
pour une utilisation immediate. 

Selectionner les photos de I'album 



RENVOI 



Pour installer Picasa et decouvrir V interface, reportez-vous a la 
section Retoucher des images avec Picasa de ce chapitre. 
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1 Apres avoir importe vos images dans Picasa, selectionnez les 
vignettes des images a exporter en tant que pages web. Des lors 
qu'elles sont selectionnees, elles sont materialisees par un encadre 
bleu. 

2 Dans le menu Actions, situe a droite du dossier, activez la 
commande Creer une page web. 
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Figure 8. 16 : Selection des images a publier sur Internet 

Si vous souhaitez creer une galerie web a partir d' images situee 
dans des dossiers differents, selectionnez chaque vignette a 
publier en cliquant dessus tout en maintenant la touche [Ctrl I 
enfoncee. Choisissez ensuite la commande Dossier/Exporter sous 
forme de page web. 



Definir les options de diaporama 

1 Quelle que soit la methode choisie, la fenetre Exporter sous 
forme de photos apparait. Pour le Web, cochez le bouton radio 
640 pixels. 



WttftQUE 



Publier des videos en ligne 

Picasa ne s'arrete pas a la publication de photos en ligne. 
L' application prend en charge egalement la majorite des standards de la 
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video. Pour publier une video dans une galerie web, importez-la, 
puis selectionnez sa vignette comme pour n'importe quelle image. 



Choisissez ensuite un titre, qui s'affichera en haut de votre page 
web. Par defaut s'affiche le nom du dossier. 

Pour definir 1' emplacement du repertoire de la page web et des 
photos sur l'ordinateur, cliquez sur le bouton Parcourir, puis sur 
le bouton Suivant. 



Exporter sous forme de page Web 



Exporter les photos eu format 
OTakoriginale 

1024 pixels (pour les grands fcians) 
O 800 pixels [pour les grand*) pages Web) 



<£>i640 pixe ls [pou r les pages Web] 
O 320 pixels (pour les einais) 
Exporter les videos avec : 



Entrer le title qui dot appareitie en haut de la page Web. 



j PGriple Japonafe - Mai 2005 

S«ec«onn« le dossier demegistrement de la page Web et des photos 
: EtreatApi&ripfe japonais • Mai 200S\ 
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Figure 8.17 : La fenetre Exporter sous forme de page web 



Choisir un modele de site 

1 L'etape suivante vous permet de selectionner un modele de page 
web. Six modeles de pages classiques mais fonctionnelles sont 
proposes par Picasa. 



REMARQUE 



Galerie web et modele XML 



Le dernier modele propose dans la fenetre Selectionner un modele de 
page web est une page XML integrant le code d'une galerie HTML 
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destinee a etre personnalisee avec un editeur web. Mais il s'adresse 
a des utilisateurs experimented. 



2 Dans cet exemple, le modele 2 a ete choisi. Selectionnez-le pour 
afficher un apercu, puis cliquez sur le bouton Terminer. 
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Figure 8. 18 : 

Selection d'un 
modele de site 



Publier la galerie sur le Web 

1 Une fois selectionnes les parametres de la galerie photo, Picasa 
travaille pour vous et met en place la galerie photo. 

2 Un apercu de la page web generee s'affiche automatiquement. 
Cliquez sur une vignette pour visualiser 1' image en grande taille. 




Figure 8. 19 : 

Apercu de la galerie 
web en mode 
Vignette 
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3 Pour naviguer au sein de la galerie web, cliquez sur les hens 
Photo suivante et Photo precedente. Pour revenir a la premiere 
photo de l'album, cliquez sur le lien Premiere. Pour revenir a 
l'ensemble des vignettes, cliquez sur le lien Vignettes. 

4 Rendez-vous maintenant a 1' emplacement specifie sur votre 
ordinateur pour visualiser les fkhiers generes par Picasa : 

_ index.htm ou index.html, en l'occurrence page d'accueil de 
votre site ; 

_ les images de grande taille au format JPEG dans un sous- 
dossier nomme images ; 

_ les pages HTML correspondant a l'affichage de chaque image 
en grande taille ; 

_ les vignettes au format JPEG dans un sous-dossier nomme 
thumbnails ("vignettes" en francais) ; 

_ une feuille de style CSS dont vous pouvez personnaliser les 
couleurs depuis un editeur web tel que Dreamweaver. 

Pour visualiser la galerie sur votre ordinateur, double-cliquez sur 
la page d' index. 

5 Pour publier cette galerie sur votre site web, faites appel a un outil 
de transfert ou utilisez un editeur web avec outil de publication 
integre, tel que Dreamweaver. 

&■ Pour plus ^informations sur la publication en ligne avec 
H Dreamweaver, reportez-vous au chapitre Alter plus loin avec 
Dreamweaver. 



8.3. Compresser des images 
pour le Web 

Pour optimiser au mieux vos images destinees au Web, il est important 
de connaitre les deux principaux formats utilises : le GIF et le JPEG. 

Le GIF (Graphics Interchange Format) limite le nombre maximum de 
couleurs de 1' image a 256 et le nombre minimum a 2. La compression se 
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charge d'eliminer les informations de couleur redondantes pour reduire 
la taille du richer. Voici quelques caracteristiques de ce format : 

II est utilise pour les graphiques simples avec peu de couleurs et 
sans degrade : illustrations, logos ou cliparts. 

II peut etre anime. C'est le format de la plupart des bannieres 
publicitaires. 

II supporte egalement la transparence : le fond d'une image GIF 
peut s' adapter a l'arriere-plan d'une page web. 

II dispose d'un affichage progressif. En d'autres termes, si la 
connexion Internet est trop lente pour afficher immediatement 
1' image, celle-ci apparaitra progressivement sur le page web. 

Le JPEG (Joint Photographic Experts Group, d'apres le groupe commun 
d' experts en photographie qui l'a mis au point) accepte plusieurs 
millions de couleurs. Voici quelques-unes de ses caracteristiques : 

II s'avere particulierement adapte aux images complexes, avec de 
nombreuses couleurs, telles que les photos ou les illustrations 
avec degrades. 

La compression JPEG entraine une perte de qualite de l'image. 
Plus l'image sera compressee, plus son poids sera faible et plus la 
qualite sera deterioree. Contrairement au GIF, ce format ne 
supporte pas la transparence mais il dispose, comme le GIF, d'un 
mode d' affichage progressif. 



REMARQUE 



Le PNG, plutot que le GIF et le JPEG ? 

Le format PNG (Portable Network Graphic) est egalement propose au 
sein de la fenetre d' optimisation de Photoshop Elements. II remplace le 
format GIF soumis a des droits d'utilisation mais n'est pas conseille 
pour la compression de photos car il produit des documents ayant un 
poids superieur a ceux au format JPEG, pour une qualite equivalente. 



Installer Photoshop Elements 

Picasa s'avere utile pour realiser gratuitement des retouches d' image 
basiques mais ne propose pas des fonctions d' optimisation precises. 

Pour realiser cette tache, nous vous proposons le logiciel Photoshop 
Elements. Complet et simple d'acces, il est disponible au prix de 
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79 euros, mais une version d' evaluation peut etre telechargee sur le site 
de Fediteur Adobe. 

1 Photoshop Elements correspond a la version grand public de 
Photoshop, le logiciel professionnel de retouche d' images. Pour 
telecharger une version d' evaluation de Photoshop Elements, 
rendez-vous sur le site d' Adobe, a l'adresse www.adobe.fr. 

2 Cliquez sur le bouton Produits/Tous les produits, puis Photoshop 
Elements. Inscrivez-vous sur le site Adobe en indiquant une 
adresse e-mail valide et un mot de passe, pour telecharger la 
version d' evaluation sur votre site. En raison du poids de 
F application, une connexion haut debit s'avere indispensable. 




Figure 8.20 : Telechargement d'une version devaluation de 
Photoshop Elements 

3 Double-cliquez sur F executable, choisissez un dossier 
d' installation, par defaut C:\Program Files\Adobe et validez. 
Ouvrez Photoshop Elements et selectionnez Partir de zero dans 
F Assistant qui s'affiche. 
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Le format JPEG est destine aux photos avec de nombreuses couleurs, 
mais produit une compression avec perte de donnees. Lors de 
Foptimisation d'une image au format JPEG, Fobjectif consiste a obtenir 
le meilleur compromis poids/qualite en determinant les parametres de 
compression qui produiront un resultat optimum pour un poids de fichier 
minimum. 



Utiliser les parametres predefinis 



Ouvrez une photo a optimiser dans Photoshop Elements avec la 
commande Fichier/Ouvrir. Choisissez la commande 
Fichier/Enregistrer pour le Web. La fenetre Enregistrer pour le 
Web s'affiche. 

Dans la liste deroulante Parametres predefinis, plusieurs types de 
compressions JPEG sont proposes. Chaque parametre predefini 
correspond a une valeur moyenne sur une echelle de a 100. Plus 
la valeur est basse, plus la compression est importante et plus la 
qualite est deterioree. 

— JPEG basse : la valeur se situe aux alentours de 10. 

— JPEG moyenne : la valeur se situe aux alentours de 60. 

— JPEG elevee : la valeur est superieure ou egale a 60. 

Dans cet exemple, optez pour JPEG elevee. Les options de qualite 
sont alors automatiquement mises a jour par Photoshop Elements, 
qui affiche une valeur de qualite Haut avec une qualite de 60. 




Figure 8.21 : 

Enregistrer une 
image au format 
JPEG 
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Definir manuellement la valeur de qualite 

Une qualite elevee entraine la creation d'un fichier plus volumineux 
qu'une qualite basse. Pour affiner les parametres d' optimisation, vous 
avez la possibilite de specifier precisement la qualite de compression, 
independamment des parametres predefinis. 

1 Optez pour 1' option Personnalises pour definir vous-meme la 
valeur a appliquer a votre image. 

2 Au sein de la liste deroulante Qualite, specifiez la valeur 
correspondant au niveau d' optimisation souhaite. Si vous testez 
des parametres intermediaires, la qualite ne semble pas se 
degrader. Mais plus la valeur est faible, plus l'apparence de 
1' image se deteriore au sein de l'apercu. 



Parametres predefinis : Personnalises v KzJ 


JPEG 


V 


Bas 


V Qualite : 1 17 


^jProgressiF 
QProfil ICC 


^ 1 


Detourage : v 





Figure 8.22 : 

Modification des options 
de qualite 



REMARQUE 



Quelle qualite d'optimisation choisir ? 

Generalement, il est conseille d'indiquer une plage d'optimisation 
moyenne situee entre 40 et 60, pour obtenir le meilleur compromis 
poids/qualite. 



Visualisez le resultat des modifications apportees dans la fenetre 
de droite. Aidez-vous si necessaire des outils Loupe et Main situes 
dans zone superieure gauche de la fenetre Enregistrer pour le 
Web. 

La baisse de poids obtenue est significative puisqu'il passe sous la 
barre des 100 Ko. Enregistrez 1' image en validant par le bouton 
OK. 
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DEFINITION 



ICC 



Situee dans section d'optimisation de la boite de dialogue Enregistrer 
pour le Web, cette option ameliore l'affichage des images dans un 
navigateur web. En effet, 1' option Conserver le profit ICC, utilisee pour la 
correction de couleurs, preserve le profil ICC de 1' illustration si celui-ci 
a ete enregistre avec 1' image originale. 

Si vous cochez cette case, si le gestionnaire de profils est correctement 
parametre et si l'ordinateur dispose de ColorSync (Mac) ou d'ICM 
(Windows), l'africhage sera identique quel que soit le poste client. 



Utiliser I'option de detourage 

Grace a la liste deroulante Detourage, il est possible de simuler une 
transparence pour le fond d'une image JPEG afin qu'elle se fonde 
parfaitement dans l'arriere-plan d'un site web. Pour etre candidate au 
detourage, 1' image doit comporter un fond transparent. 



Oetourer une image 

1 Ouvrez une nouvelle image avec la commande Fichier/Ouvrir. Par 
defaut, le caique de cette image est verrouille. Dans le panneau 
Caiques, double-cliquez sur le caique. 

2 La fenetre Nouveau caique s'affiche. Renommez le caique Arriere- 
plan en Papillon. Vous allez maintenant pouvoir modifier 
1' image. 

3 Dans cet exemple, le fond de 1' image est blanc. Pour integrer de 
fa?on harmonieuse cette image au sein d'un site web avec un 
arriere-plan de couleur, vous allez detourer le papillon. 

4 Selectionnez l'outil Baguette Magique ((W)) et selectionnez une 
Tolerance de 32 dans la barre d' options. Cliquez sur l'arriere-plan 
de 1' image. Tous les pixels blancs entourant le papillon sont 
selectionnes. 



5 Appuyez sur la touche [Supprj pour supprimer cet arriere-plan. Le 
fond apparait quadrille, symbolisant un fond transparent dans un 
logiciel de retouche d' images. Deselectionnez le papillon avec la 
commande Selection/Deselectionner. 
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Figure 8.23 : Suppression de la couleur d'arriere-plan avec /'out/7 
Baguette magique 

Definir les options de detourage 

1 Enregistrez 1' image avec la commande Fichier/Enregistrer pour le 

Web. Selectionnez le parametre predefini JPEG moyenne. Le fond 
blanc a reapparu dans la fenetre d'apercu car le format JPEG ne 
supporte pas la transparence, contrairement au format GIF. 

2 Dans la liste deroulante Detourage, selectionnez la couleur de 
detourage a appliquer en arriere-plan. Vous pouvez choisir le 
blanc, le noir ou cliquer sur Autre pour afficher la palette des 
couleurs. 

3 Si votre page web a un fond colore, il est conseille de choisir la 
meme teinte pour votre image detouree. Une fois selectionnee une 
couleur, l'apercu est recalcule et affiche dans la fenetre de 
previsualisation. 

4 Si vous etes satisfait, enregistrez 1' image en cliquant sur le bouton 
OK, puis inserez-la dans votre page web pour tester 1' integration 
de la photo avec l'arriere-plan colore (voir Figure 8.24). 
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Figure 8.24 : A gauche, I'image avec un fond transparent, a droite, 
la meme image detouree avec un fond colore 



REMARQUE 



Pourquoi cocher I'attribut Progressif ? 

Si vous cochez la case Progressif, situe dans la section d'optimisation, 
a gauche de l'option de detourage, votre image JPEG ne s'affichera pas 
en un seul bloc mais progressivement dans votre navigateur web. 

Au fur et a mesure du telechargement, la qualite de I'image s'ameliore 
progressivement. De floue, I'image devient de plus en plus nette. Cette 
methode a 1'avantage de faire patienter plus facilement l'internaute, qui 
constate revolution du chargement en direct. 



Format GIF : illustrations et cliparts 

Le GIF est le format de compression d' images privilegie pour les logos 
ou les illustrations contenant du texte. Vous pouvez reduire la taille des 
images GIF en limitant le nombre de couleurs du fichier, qui peut aller 
jusqu'a 256. 

Lors de la compression GIF, l'essentiel de votre tache va consister a 
determiner la table des couleurs qui produira le meilleur compromis 
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poids/qualite. L'objectif est en effet d'obtenir une qualite optimale tout 
en reduisant la taille de 1' image au maximum. 

Bien utiliser les tables des couleurs 

La table des couleurs est une option cle qui va determiner la qualite et le 
rendu final de votre image. Une image au format GIF est limitee a 
256 couleurs. En raison de cette limitation, il est necessaire d'indiquer 
des couleurs specif! ques dans la palette afin qu'elles correspondent au 
mieux aux pixels du document pour une qualite optimale. 

1 Ouvrez au sein de Photoshop Elements une illustration ou un logo 
ayant peu de couleurs avec la commande Fichier/Ouvrir. 

2 Pour l'enregistrer au format GIF, activez la commande 
Fichier/Enregistrer pour le Web. 

3 Selectionnez une option GIF dans la liste deroulante Parametres 
predefinis : 

_ GIF32/GIF64 ou GIF 128: ces chiffres correspondent au 
nombre de couleurs de 1' image. Plus il est faible, plus le poids 
sera leger et la qualite degradee. 

_ trame et non trame : l'objectif du tramage est de suggerer une 
couleur a l'ceil humain a partir de plusieurs couleurs. Cette 
technique peut ameliorer l'affichage si. la palette selectionnee 
ne contient pas toutes les couleurs de 1' image. 

4 Une palette de couleurs doit ensuite etre selectionnee. Quatre 
types de palettes de couleurs sont disponibles : 

_ Palette perception : si vous activez cette option, une palette 
personnalisee de 256 couleurs est selectionnee en donnant la 
priorite aux couleurs auxquelles l'ceil humain est le plus 
sensible. 

— Palette selective : cette palette genere, tout comme la palette 
Perception, une table des couleurs personnalisees de 
256 couleurs fondee sur les couleurs de l'image a optimiser. 
Elle restitue de la facon la plus juste l'image originale. 

— Palette adaptative : cette palette s'adapte a l'image a optimiser, 
d'ou son nom. Elle est constitute des couleurs les plus 
frequemment utilisees dans le document pour le reconstituer la 
plus fidelement. Elle est tres pratique si votre image a une ou 
deux couleurs manifestement dominante, par exemple une 
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photo representant un ocean ou un desert. Si vous utilisez 
d'autres images au format GIF dans votre page web, le 
navigateur fera automatiquement appel a cette palette et 
desactivera les autres tables de couleurs eventuellement 
presentes dans d'autres fichiers GIF. 

- Palette web : alors que la palette Adaptative s'adapte a l'image, 
ici c'est l'image qui doit s'adapter avec la palette Web. La 
qualite n'est done pas systematiquement au rendez-vous. 
Chaque couleur de l'image originale est remplacee par son 
equivalent le plus proche issu de la palette Web, qui comprend 
216 couleurs. Pour des resultats satisfaisants, il est conseille 
d' utiliser cette palette avec des logos ou des illustrations ayant 
peu de couleurs. Principal avantage : le poids obtenu est 
generalement faible mais la restitution des couleurs peut 
fortement s'en ressentir. Avec la diffusion des ecrans a 
16 millions de couleurs, la palette Web devenue obsolete et est 
de moins en moins utilisee. 

5 Dans le cas d'un logo ayant trois couleurs principals (blanc, vert 
et noir), choisissez la palette Adaptative. 



Parametres predefinis : 



GIF 32 Trame V 



© 



GIF 



Selective 



Perception 



]]]Entrelace 



Selective 
Adaptative 
Restrictive (VVeb) 



Couleurs 
Tramage 
betourage 



88% 






Taille de l'image 

- Taille originale 

Largeur : 110 pixels 

Hauteur : 123 pixels 



Figure 8.25 : 

Selection d'une table de 
couleurs 



Pour selectionner a chaque fois la palette la mieux adaptee, optez 
pour un parametre predefini, qui se chargera de selectionner 
automatiquement la table de couleurs adequate et observez 
attentivement 1'apercu genere dans le fenetre d'enregistrement 
pour le Web. 
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7 Le poids final de V image est egalement un element a verifier 
lorsqu'il s'agit de comparer les performances des differentes 
palettes. Lorsque vous etes satisfait, enregistrez V image en 
cliquant sur le bouton OK. 

Optimiser plusieurs images simultanement 

Si vous souhaitez optimiser rapidement un grand nombre d' images 
destinees au Web, une compression image par image s'averera 
rapidement fastidieuse. Pour gagner du temps et si les criteres a 
appliquer sont similaires, vous pouvez faire appel a la commande de 
traitement de fichiers multiples de Photoshop Elements. Elle se charge 
de travailler a votre place. 

Selectionner les repertoires source 
et destination 

1 Selectionnez la commande Fichier/Traitement de fichiers 
multiples pour ouvrir la boite de dialogue ad hoc. Vous allez 
pouvoir appliquer une modification de taille et de type de fichier a 
toutes les images d'un meme repertoire, mais aussi ajuster 
rapidement la couleur, les niveaux, le contraste ou la nettete. 

2 Dans la zone Traiter les fichiers de, trois options sont disponibles : 

— Dossier : application de transformations a plusieurs fichiers 
issus d'un meme dossier. 

— Importation : selectionnez cette option dans le cas d' images 
issues d'un autre peripherique tel qu'un appareil photo 
numerique, un scanner, mais aussi de supports de stockage 
amovibles tels qu'une carte memoire ou une cle USB par 
exemple. 

— Fichiers ouverts : optez pour ce parametre si plusieurs images 
sont deja ouvertes au sein de Photoshop Elements. 

3 Dans cet exemple, les fichiers a traiter proviennent d'un repertoire 
sur l'ordinateur. Pour selectionner le dossier contenant les images 
a optimiser, cliquez sur le bouton Parcourir au sein de la section 
Source. Choisissez les fichiers a retoucher et/ou a optimiser. 
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Si vous avez selectionne 1' option Dossier, cochez eventuellement 
1' option Inclure les sous-dossiers pour inclure tous les dossiers 
imbriques. 

Pour selectionner 1' emplacement des fichiers modifies, cliquez sur 
le bouton Parcourir dans la section Destination. Vous pouvez 
choisir un dossier deja cree sur votre ordinateur ou en creer un 
nouveau par un clic sur le bouton Creer un nouveau dossier au 
sein de la fenetre Rechercher un dossier. 

Si le dossier de destination est identique au dossier source, cochez 
la case Identique a la source. 











Traiter les fichiers de : 




Dossier v 






Source : 




N:\Photos\2005\2005_05_Japon\J03-Tokyo-Harajuku-Akih 


[ £arcourir... 


1 


□ inclure tous les sous-dossiers 
Destination : 




ments and Settings\Compaq_Proprietaire\Bureau\Tokyo\ 


1 Parcourir... 


1 


O Identique a la source 



Figure 8.26 : Selection des repertoires source et destination 



4+ 



REMARQUE 



Conserver les originaux 

II sera impossible d'annuler les transformations effectuees dans le 
cadre d'un traitement de fichiers multiples, aussi conservez 
precieusement un exemplaire des fichiers originaux au cas ou Tune des 
operations effectuees ne serait pas a la hauteur de vos esperances. 



Renommer les fichiers 

Renommer les fichiers reste une option facultative neanmoins conseillee 
pour mieux reperer les modifications effectuees. 

1 Pour renommer rapidement plusieurs fichiers, cochez la case 
Renommer les fichiers dans la section Denomination de fichiers. 
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Selectionnez un nom de fichier qui sera commun a toutes vos 
images (par exemple Image) ou choisissez dans la liste deroulante 
1' intitule a utiliser (dates, chiffres...)- Choisissez ensuite un autre 
type d' element a utiliser pour differencier les fichiers. II peut 
s'agir egalement de chiffres, de lettres, de la date, etc. Si vous 
selectionnez une option, un exemple de nom de fichier s'affiche 
automatiquement sous la premiere liste deroulante. 

Dans la zone Compatibilite, par defaut, les noms de fichiers sont 
compatibles avec le systeme Windows. Cochez les options 
Mac OS et Unix pour rendre les noms de fichiers compatibles avec 
de multiples systemes d' exploitation et eviter toute erreur 
d' interpretation sur le serveur web (de type erreur 404, 
correspondant a des pages non trouvees). 



- Denomination de fichier 
Renommer les fichiers 



Nom de Document 



aaaammjj (date) 



Exemple :Mon-fichier20061003.gif Debut du no. de serie : ll 

Compatibilite : Windows Mac OS ESjUnbj 



Figure 8.27 : Renommer automatiquement les fichiers 



Redimensionner les images 

1 Dans la section Taille de I'image, cochez la case Redimensionner les 
images pour specifier de nouvelles largeur et hauteur en pixels 
pour vos documents. 

2 Vous pouvez egalement determiner la resolution de vos images : 

— 72 ppp est suffisant pour le Web. 

— Au-dela de 200 ppp, la resolution est suffisante pour 
1' impression. 

3 Pour eviter toute deformation de vos images lors du 
redimensionnement, cochez la case Conserver les proportions. 
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— Taille de I'image 
Redimensionner 







PPP | 


es images 




Largeur : 


1000 




pixels *£; 


-l a Resolution : 


|v 












Hauteur: 







cm v. 




j Conserver les proportions 







Figure 8.28 : Redimensionner automatiquement les images 



Optimiser les fichiers pour le Web 

1 Dans la zone Type de fichier, cochez la case Convertir les fichiers au 
format et selectionnez le fichier d' image a utiliser pour le 
traitement par lot. 

2 Pour une utilisation ulterieure sur le Web, privilegiez les formats 
JPEG et GIF afin d'optimiser la taille de vos images. Les options 
JPEG qualite superieure et JPEG qualite maximale offrent une 
excellente qualite d' image, mais entrainent un poids final plus 
important. 



A" Pour en savoir plus sur les formats d'image pour le Web, 
rehvw reportez-vous a la section Compresser des images pour le Web 
de ce chapitre. 



Type de fichier 



Convertir les fichiers au format : | JPEG Qualite Superieure 



Figure 8.23 : Optimisation de plusieurs fichiers image 



Realiser des retouches rapides 

1 Dans la colonne situee a droite de la fenetre Traitement de fichiers 
multiples, cliquez sur la fleche Retouche rapide pour derouler les 
options. 
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Quatre parametres de retouche sont a votre disposition : 

— Niveaux automatiques : corrige automatiquement le contraste et 
les couleurs. 

— Contraste automatique : corrige le contraste sans intervenir sur 
les couleurs. 

— Couleur automatique : corrige couleur et contraste. 

— Nettete : corrige les photos legerement floues. 

Vous pouvez cocher les quatre options ou n'en selectionner 
aucune. Mais realisez des tests prealables sur quelques photos 
dans Photoshop Elements avec les outils de retouche automatique 
pour verifier que les options selectionnees correspondent bien a 
vos besoins. 



■ry Retouche rapide 

Niveaux automatiques 

□ Contraste automatique 

□ Couleur automatique 

□ Nettete 




Figure 8.30 : 

Retouches rapides 
simultanees 



Integrer legendes et filigranes 

La legende correspond a un court titre ou a une description rapide de 
1' image. Vous pouvez y inclure des informations sur l'auteur, un 
copyright eventuel, etc. Le filigrane est une inscription placee sur 
1' image qui evite que vos droits d'auteur soient enfreints sans votre 
autorisation, l'image n'etant plus exploitable pour l'impression. 

Inserer une legende 

1 Pour inserer une legende au sein de vos images, deroulez le menu 
Libelles et selectionnez Legende dans la liste deroulante. 

2 Cochez ensuite, parmi ces trois propositions, le type de legende a 
inserer : 

_ Nom de fichier : il s'agit du nom donne a l'image. 
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— Description : cette option correspond a la description donnee a 
l'image. Vous devez l'avoir prealablement inseree a l'aide du 
menu Fichiers/lnformations. 

— Date de modification : il s'agit de la derniere date de mise a jour 
du fichier. 

Dans la liste deroulante Position, selectionnez l'emplacement de la 
legende sur l'image (Bas gauche, Centre ou Bas droit). 

Selectionnez une police dans la liste deroulante Police, ainsi 
qu'une taille de texte et une valeur d'opacite. Plus la valeur est 
faible, plus la transparence du texte sera importante. 

Enfin, cliquez sur le rectangle de couleur pour affecter une 
couleur de texte a la legende. 



S? Libelles 



Legende 



p| Nom de fichier 

□ Description 

□ Date de modification 
Position : 



Bas droite 



Police : 

Opacite : 
Couleur : 



Arial 



12 



100 



Figure 8.31 : 

Insertion d'une legende sur 
chaque photo 



Inserer un filigrane 

1 Apres avoir deroule le menu Libelles, cliquez sur Filigrane dans la 
liste deroulante. Entrez le texte du filigrane dans le champ Texte 
personnalise, par exemple votre nom ou le copyright de la photo. 
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Les options suivantes sont ensuite communes aux options de 
legende. Choisissez un emplacement pour le filigrane, de 
preference Centre pour eviter que le filigrane ne soit supprime 
lorsque vous recadrez 1' image par exemple. 
Selectionnez ensuite un type de police, une taille de texte, une 
valeur d'opacite ainsi qu'une couleur. 



^7 Libelies 



Filigrane 



Texte personnalise : Copyright K.Warb 



Position : 
Police : 

tT 

Opacite : 
Couleur: 



Centre 



Arial 



12 



50 



Figure 8.32 : 

Insertion d'un filigrane 



Lancer le traitement de fichiers multiples 

1 Apres avoir defini les options de traitement de fichiers multiples, 
cliquez sur le bouton OK. 

2 Les operations s'effectuent sous vos yeux au sein de 1' interface de 
Photoshop Elements. Lorsque le traitement est termine, rendez- 
vous au sein du repertoire de destination pour verifier les 
modifications effectuees. 
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Reinitialiser les options par defaut 

Si vous maintenez la touche (m) enfoncee, le bouton Annuler se 
transforme en bouton Reinitialiser. Cliquez dessus pour retrouver toutes 
les options par defaut de la fenetre de traitement de fichiers multiples. 



8.4. Creer des elements graphiques 
pour un site web 

II existe de multiples facons d'animer des images pour le Web. 
Bannieres animees, boutons de type roll-over et cartes images sont les 
plus courantes. 

Realiser une banniere publicitaire 

Une banniere animee vehicule generalement de la publicite pour des 
sites partenaires, partageant la meme thematique que le site ou elle est 
inseree ou une thematique complementaire. 

Creer I'arriere-plan de la banniere 

La banniere est constitute d'une image au format GIF anime, avec une 
largeur standard de 468 x 60 pixels de large. Cette image va etre animee 
facilement grace aux fonctions dediees de Photoshop Elements. 

Definir les dimensions de la banniere 

1 Cliquez sur le menu Fichier/Nouveau pour creer une nouvelle 
image. Dans la boite de dialogue qui s'affiche, indiquez 
Banniere dans le champ Norn. 

2 Dans la liste deroulante Parametre Predefini, selectionnez 1'option 
Personnalise. Entrez une largeur de 468 pixels et une hauteur de 
60 pixels. La largeur et la hauteur sont automatiquement mises a 
jour. Le format 468 x 60 pixels est le standard pour les bannieres 
publicitaires. 

3 Conservez une resolution de 72 pixels par pouce, selectionnez 
Couleurs RVB dans la liste deroulante Mode et choisissez 1'option 
Transparent dans la liste deroulante Contenu de I'arriere-plan. 
Validez les modifications par un clic sur le bouton OK. 
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Nom : Bannieie 






Parametre predefini : Personnalise 




- 


Largeu: 


pixels 


V 


Hauteur :;6C| 


|| pixels 


v 


Resolution : ; 72 


pixels/pouce 


v 


Mode : Couleurs RVB 


v 




Contenu de l'arriere-plan : Transparent 




v 



Talllede rimage: 
82,3 Ko 



Figure 8.33 

Creation 
d'une 
nouvelle 
banniere 



Importer le logo 

1 Importez une image avec la commande Fichier/Ouvrir. 
Generalement, il s'agit du logo de votre site ou d'un symbole 
rappelant son theme. Choisissez une photo sur votre ordinateur, 
puis cliquez sur le bouton Ouvrir. Choisissez de preference une 
image ayant peu de couleurs et au format GIF. 

2 Activez la commande Selection/Tout selectionner : 1' image 
apparait alors encadree de pointilles. 

3 Selectionnez la commande Edition/Copier, rendez-vous dans le 
nouveau document Banniere cree precedemment et selectionnez la 
commande Edition/Coller. 

4 Placez 1' image importee a gauche de la banniere a l'aide de l'outil 
Deplacement ((y)) de la barre d'outils, accessible via la 
commande Fenetre/Outils. La barre d'outils contient tous les 
outils necessaires a la retouche d' images au sein de Photoshop 
Elements. 

5 Redimensionnez-la si necessaire grace a l'outil de 
redimensionnement accessible avec le raccourci clavier fctri] +fT]- 




Figure 8.34 

insertion du 
logo sur la 
banniere 
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Ajouter un fond degrade 

1 Au sein du panneau Caiques, accessible via la commande 
Fenetre/Calques, creez un nouveau caique en cliquant sur l'icone 
Nouveau caique et placez-le sous le caique courant. 

2 Renommez les caiques degrade et logo en cliquant sur leur 
titre. II est important de donner un nom precis a vos caiques pour 
une meilleure organisation et pour faciliter les modifications 
ulterieures. 



REMARQUE 



Avantage des caiques 

Chaque element composant une image creee avec Photoshop Elements 
peut etre place sur des caiques distincts pour etre modifie 
independamment les uns des autres. 

Pour modifier un element place sur un caique, il suffit de cliquer sur ce 
caique dans le panneau Caiques, puis de realiser les modification 
necessaires au sein de votre interface de travail. 



Pour realiser un fond en degrade, choisissez l'outil Degrade ((G)). 
Selectionnez la teinte de votre choix comme couleur de premier 
plan et du blanc en couleur d'arriere-plan. En ce sens, cliquez sur 
le carre de couleur situe en bas de la barre d'outils. Harmonisez la 
couleur du logo avec l'arriere-plan de la banniere. 

Maintenez le bouton gauche de la souris enfonce et et faites 
glisser le carre vers le cote oppose pour creer votre degrade (voir 
Figure 8.35). 

Pour un arriere-plan plus homogene, selectionnez l'outil 
Doigt (|D) de la barre d'outils. Vous allez melanger les pixels de 
couleur pour mieux fondre les couleurs de l'arriere-plan. Cet outil 
reproduit l'effet d'un doigt etalant de la peinture. 

Maintenez le bouton gauche de la souris enfonce tout en faisant 
des petits mouvements de gauche a droite. Le fond de votre 
banniere est maintenant pret. 

Pour mieux vous rendre compte du resultat obtenu, activez l'outil 
Zoom ((z)). Vous pouvez maintenant ajouter le texte de votre 
banniere. 
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Figure 8.35 : Ajout du fond en degrade 



Inserer du texte 

1 Le texte d'une banniere correspond generalement a un slogan 
court, decrivant le site, suivi de son adresse web. Ouvrez le 
panneau Caiques avec la commande Fenetre/Calques. 

2 Selectionnez l'outil Texte horizontal ((T)) dans la barre d'outils. 
Choisissez une couleur de texte plus sombre que la couleur 
d'arriere-plan pour que le texte ressorte. 

3 Dans la barre d' options, choisissez une police assez epaisse. Ici, il 
s'agit de l'Arial Black en taille 24 pt. 

4 Ecrivez un texte d'accroche. Un nouveau caique texte est cree 
automatiquement. Dans le panneau Caiques, cliquez sur l'ceil 
situe a gauche pour le masquer. 
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-U f\ 3 Verrou: 



A 



s> 






|T| VJsftez wvAv.monjardin.com 



|T| Vous avez la main verte ? 



logo 



degrade 



Figure 8.36 : 

Apercu du 

panneau 

Caiques 



5 Ecrivez un nouveau texte, par exemple 1' adresse de votre site 
web, en conservant les memes options de police et de couleur. 



Banniere 9 100 % (Vous avez la main verte ? , RVB/8*: 



- □ X 



N^/ 



Vous avez la main verte ? 



16,51 cm x 2.12 cm (72 ppp) 



Figure 8.37 : Insertion du texte 



REMAROUE 



Choix du style et des couleurs 



Pour reussir votre banniere publicitaire, prevoyez au maximum deux 
lignes de texte. Choisissez une police avec un style gras (par exemple 
Arial Black) et des couleurs contrastees pour mettre en evidence le 
message. 
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Preparer I'animation 

1 Maintenant que les images de la banniere sont pretes, fusionnez 
les caiques degrade et logo. En ce sens, selectionnez-les dans le 
panneau Caiques tout en maintenant la touche (Ctrl] enfoncee, puis 
cliquez du bouton droit et choisissez Fusionner les caiques. 
Nommez le nouveau caique obtenu fond. 

2 Copiez ce caique en le selectionnant du bouton droit et choisissez 
la commande Dupliquer le caique. Conservez le nom par defaut, 
fond copie, et validez par un clic sur le bouton OK. 

3 Deplacez le caique fond copie sous le deuxieme caique de texte, 
puis fusionnez chaque caique de texte et un caique de fond. 

4 Vous obtenez au total deux caiques, c'est-a-dire deux images qui 
tourneront en boucle lors de 1' animation de la banniere. 




Figure 8.38 : 

Apercu du 
panneau 
Caiques avant 
lenregistrement 
de I'animation 



Enregistrer I'animation pour le Web 

ne reste plus qu'a animer les caiques. Selectionnez la 



II ne reste plus qu'a animer 

commande Fichier/Enregistrer pour le Web. 

Enregistrer pour le Web s'affiche. 



La fenetre 
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Dans la liste deroulante Parametres predefinis, indiquez 
Personnalises. Choisissez ensuite GIF, Adaptative et Wcouleurs. 
Cochez la case Animation, indispensable pour transformer votre 
image au format GIF anime. 



r§ 



Pour plus d' informations sur les options d' optimisation du 
format GIF, reportez-vous a la section Compress er des images 
pour le Web de ce chapitre. 

Surveillez le poids de votre banniere, indique sous l'image au 
format GIF. Generalement, le poids d'une banniere ne doit pas 
exceder 20 kilo-octets meme si le haut debit offre desormais 
davantage de souplesse. 

La section Animation, auparavant grisee, est desormais accessible. 
Cochez la case Boucle pour que votre banniere tourne en boucle, 
puis selectionnez une frequence d' image de2. 

Pour avoir un apercu de I'animation finale, utilisez les fleches 
placees dans la section Animation. Elles permettent d'avancer ou 
de reculer d'une image. Validez par un clic sur le bouton OK. 
Selectionnez un emplacement sur votre ordinateur, puis validez. 
Double-cliquez sur la banniere pour avoir un apercu de 
I'animation finale. 



^^^^^^^^^^H 




Figure 8.33 : Compression pour le Web 
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Publier la banniere sur un site web 

1 Une banniere s'insere dans une page web comme n'importe 
quelle image. Ouvrez votre page web dans un editeur tel que 
Dreamweaver. Activez le mode Creation pour avoir un apercu 
visuel de la page web. 

2 Placez votre curseur a l'endroit ou doit etre inseree la banniere. 
Selectionnez la commande Insertion/Image, puis choisissez le 
fichier correspondant a votre banniere. II est conseille de la placer 
dans le meme repertoire que le fichier HTML pour eviter tout 
probleme d'acces lors de la publication en ligne. La banniere est 
fixe au sein de Dreamweaver. 

3 Selectionnez-la, puis ouvrez la fenetre Proprietes. Inserez un lien 
vers le site web a promouvoir a l'aide de la banniere publicitaire 
en ouvrant une nouvelle fenetre (cible_blank). 

4 Pour tester 1' animation en ligne, lancez un apercu dans un 
navigateur Internet avec la commande Fichier/Apergu dans le 
navigateur. Votre banniere est prete a etre publiee, il ne reste plus 
qu'a mettre a jour votre site web a l'aide de l'outil de publication 
integre a Dreamweaver. 



Vous avez la main verte ? 



Accneil Presentation Produits Services Plan du site Contact 



Vente de fleurs en ligne 



' Proprietes 



Image, 17K l |-*68 ] Src : Banniere.gif Q> _j Sec. 



Carte 



H 60 Lien http:«www.monjardin. Q, _, Modifier % Q Jif^ €) A 

EspaceV Cfclej _blank v 6ordure-fo £ S3 



D OV EspaceH '"TDSKI 



_J Aligner Pardefaut 



Figure 8.40 : Insertion d'une banniere dans une page web 



RENVOI 



Pour plus d' informations sur Vinsertion d' images avec 
Dreamweaver, reportez-vous au chapitre Aller plus loin avec 
Dreamweaver. 
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Creer une banniere en ligne 

Pour la creation de bannieres animees simples utilisant du texte, 
vous pouvez faire appel a des services en ligne tels que ceux du site 
www.3dtextmaker.com. lis sont particulierement simples d'emploi, a base 
de formulaires permettant de selectionner les elements a inserer. 



8.5. Realiser un arriere-plan 

Generalement, le plupart des sites web proposent un arriere-plan uni 
pour une meilleure lisibilite du texte. Mais pour illustrer une zone de 
votre site web, en fond de tableau par exemple, il est possible de creer 
des arriere-plans personnalises avec Photoshop Elements. 



Transformer une photo en arriere-plan 

Pour ne pas alourdir inutilement le poids de vos pages, il est deconseille 
de faire appel a une photo sans 1' optimiser auparavant dans un logiciel 
de retouche d' images. 

1 Activez la commande Fichier/Ouvrir, selectionnez sur votre 
ordinateur la photo a optimiser, puis cliquez sur le bouton Ouvrir. 

2 Si vous souhaitez redimensionner votre photo, faites appel a la 
commande Image/Redimensionner/Taille de I'image. Inserez au 
sein des champs Largeur et Hauteur la valeur de votre choix, soit 
en pixels, soit en pourcentage, puis cliquez sur le bouton OK. 




Figure 8.41 : 

Selection 
d'une photo 
en tant 
qu arriere-plan 
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A 



ATTENTION 



Bien choisir une photo d'arriere-plan 

Pour ne pas nuire a la lisibilite de votre page web, evitez de prendre 
une photo au niveau de detail trop important, tel qu'un portrait par 
exemple. Avant d' optimiser le document, verifiez les dimensions 
necessaires pour son insertion au sein de votre page web afin d'eviter 
tout redimensionnement au sein de l'editeur web, qui deteriorerait 
1' image. 



Ajouter des effets de couleur et de texture 

1 Selectionnez la commande Accentuation/Regler la 
Couleur/Teinte/Saturation. Cochez la case Redefinir. Avec le 
curseur Teinte, reglez les couleurs pour creer un effet colore sur 
P image en choisissant la dominante de votre choix (vert, bleu, 
jaune...). 

2 Utilisez le curseur Saturation pour definir Pintensite de la teinte et 
le curseur Luminosite pour ajouter plus ou moins de lumiere a 
votre cliche. 

3 Cochez la case Apergu pour visualiser en temps r6el les 
modifications sur P image. Plus votre photo est sombre, plus la 
lisibilite du texte sera reduite, a moins que vous n'optiez pour un 
texte de couleur claire. Apres avoir fait les modifications, cliquez 
sur le bouton OK. 




Figure 8.42 : 

Retouche 
des couleurs 
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Utilisation des modes de caique 

Grace aux modes de caique, vous pouvez facilement creer des effets 
sur votre image sans modifier le cliche original. Cette methode est 
pratique lorsqu'il s'agit de realiser quelques essais de couleur et de 
lumiere. 

Depuis le panneau Caiques, creez un nouveau caique au-dessus de la 
photo et selectionnez Teinte, Saturation, Couleur ou Luminosite dans la liste 
deroulante Modes de caique situee a gauche du panneau Caiques. 
Remplissez ce caique de la couleur de votre choix pour avoir un apercu 
de 1' effet. Neanmoins, pour plus de precision, utilisez la boite de dialogue 
Teinte/Saturation. 



Pour faciliter P integration de la photo dans votre page web, vous 
pouvez egalement diminuer son opacite depuis le panneau 
Caiques en selectionnant une valeur de 50 % dans la liste 
deroulante Opacite. 

Par defaut, le fond est transparent. Mais, pour mieux visualiser le 
resultat, creez un nouveau caique en cliquant sur Picone 
correspondante dans le panneau Caiques et remplissez-le de blanc 
a Paide de Poutil Pot de peinture ((k)) de la barre d'outils. 



f. 







■ 
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Figure 8.43 : Modification de I' opacite 

6 Activez la commande Filtres/Textures/Placage de texture. Depuis 
le menu Filtres, vous pouvez ajouter des effets speciaux pour 
donner une texture de type tissu ou mosa'i'que a votre image. 
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Attention, ne superposez pas les effets, au risque d'obtenir une 
image trop chargee qui nuirait a la lisibilite du texte. 

Modifiez 1'intensite de l'effet au sein de la boite de dialogue 
Placage de texture en deplacant le curseur Echelle vers la gauche 
ou la droite. 

Pour accroitre ou diminuer le placage de texture, deplacez le 
curseur Relief, puis ajustez la luminosite via la liste deroulante 
Lumiere. Validez les modifications en cliquant sur le bouton OK. 




Figure 8.44 : Application du f litre Placage de textures 



Optimiser I'image pour une publication 
sur le Web 

1 Choisissez la commande Fichier/Enregistrer pour le Web. Dans la 
section Parametres, choisissez 1' option JPEG moyenne. Cochez 
egalement 1'option Progressif pour que I'image apparaisse au fur 
et a mesure lors du chargement au sein du navigateur. 
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Pour eviter toute surcharge de la page, un poids maximum de 
80 kilo-octets par image est conseille. En outre, n'inserez pas plus 
de deux ou trois images de ce type dans la meme page web. 

&' Pour plus d' informations sur V optimisation au format JPEG, 
renvoi reportez-vous a la section Compress er des images pour le Web 
de ce chapitre. 

2 Cliquez sur le bouton OK pour enregistrer les parametres 
d' optimisation de I'image. Entrez un nom de fichier dans la boite 
de dialogue Enregistrer une copie optimisee sous et cliquez sur le 
bouton Enregistrer. Elle est maintenant prete a une utilisation 
pour le Web. 
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Figure 8.45 : Compression JPEG 






REMARQUE 



The Gimp vs Photoshop Elements 

The Gimp, application de retouche d' images gratuite, peut constituer 
une solution interessante pour les utilisateurs habitues a un autre logiciel 
de retouche d'images, car sa prise en main s'avere moins intuitive que 
Photoshop Elements. Neanmoins, The Gimp est un outil puissant, qui 
dispose de nombreux filtres permettant de creer des effets speciaux pour 
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les photos. 

Pour plus d' informations sur The Gimp, un site en francais est 
accessible a 1'adresse www.gimp-fr.org. 



Inserer I'image en arriere-plan 



1 Dans un editeur web tel que Dreamweaver, ouvrez votre page 
web avec la commande Fichier/Ouvrir. 

2 La photo va etre placee en fond dans une cellule de tableau. Creez 
un nouveau tableau avec la commande Insertion/Tableau. 
Selectionnez une cellule, puis cliquez sur l'icone du dossier pres 
du champ Ar. plan pour selectionner 1' arriere-plan de cellule. 

3 Selectionnez I'image realisee avec Photoshop Elements, puis 
enregistrez-la si necessaire dans le dossier de votre site. 

gl Pour plus d 'informations sur la creation de tableaux avec 
renvoi Dreamweaver, reportez-vous au chapitre Aller plus loin avec 
Dreamweaver. 

4 La photo s'affiche en fond de cellule. Si vous diminuez fortement 
son opacite, le texte reste lisible. Ce faisant, vous donnez une 
touche plus personnelle a votre page web. 
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Figure 8.4G : Insertion de la photo en fond de tableau 
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Creer un motif d'arriere-plan 

La creation de motif pour couvrir la totalite de l'arriere plan d'une page 
est desormais obsolete. Neanmoins, pour creer des bordures ou lignes de 
separation entre des paragraphes, vous pouvez creer un motif de 
quelques pixels au sein d'un logiciel de retouche d' images et faire en 
sorte qu'il se repete indefiniment dans une cellule de tableau. 

Dessiner un motif 

1 Creez un nouveau document avec la commande Fichier/Nouveau. 
Dans le champ Norn, indiquez Motif. Dans la liste deroulante 
Parametres predefinis, selectionnez Personnalise. Indiquez 10 pixels 
pour la Largeur et 10 pixels pour la Hauteur. Choisissez une 
Resolution de 72 pixels/ pouce, un Mode de type Couleurs RVB et 
selectionnez Blanc dans la liste deroulante Contenu de I 'arriere-plan. 
Validez par un clic sur le bouton OK. 

2 Pour mieux visualiser votre image, activez l'outil Zoom ((z)) de la 
barre d'outils. Cliquez sur le document vierge pour obtenir un 
zoom d'au moins 500 %. 

3 Selectionnez l'outil Rectangle ((b)) au sein de la barre d'outils. 
Choisissez une couleur de premier plan. 

4 Dessinez un petit carre de couleur au centre du document. Depuis 
la barre d' options, selectionnez eventuellement un style pour 
donner du relief au motif. 



□ H UljOOXv) 
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Figure 8.47 : Creation du motif avec l'outil Rectangle 

Lorsque vous etes satisfait, enregistrez votre travail a l'aide de la 
commande Fichier/Enregistrer pour le Web. 

Dans la section Parametres, selectionnez le format GIF 32 non 
frame. L'image obtenue est particulierement legere, puisqu'elle ne 
pese qu'une centaine d' octets. Validez par un clic sur le bouton 
OK. Enregistrez votre image sous le nom de motif.gif. 
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Figure 8.48 : Enregistrement du motif au format GIF 



Placer le motif sur la page web 

1 Activez la commande Fichier/Ouvrir et selectionnez la page web 
sur l'ordinateur. 

2 Pour inserer un tableau, activez la commande Insertion/Tableaux. 

Placez le curseur dans une cellule de tableau. Ce type de motif est 
approprie pour separer des paragraphes ou encadrer un titre. 

3 Ouvrez la fenetre Proprietes, puis cliquez sur l'icone Dossier 
situee a droite du champ Ar. plan pour selectionner votre motif. 
Validez par un clic sur le bouton OK. Enregistrez si necessaire le 
motif dans le dossier de votre site. 

4 Votre motif s' applique automatiquement a la cellule selectionnee. 
Lors de la mise a jour de la page web, n'oubliez pas de transferer 
egalement 1' image du motif. 
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Figure 8.43 : Apercu du motif insere dans une page web 

Creer une visite virtuelle 3D a partir 
de photos 

Grace aux logiciels Photoshop Elements et Stitcher Express, les images 
se transforment en quelques clics en un fichier Quick Time VR en trois 
dimensions. L'utilisateur aura l'impression de se deplacer au sein des 
images comme s'il etait a l'interieur. Ainsi, proposer une visite virtuelle 
de sa maison ou de son quartier prefere devient accessible a tous et peut 
etre partage sur le Web. 

Avant la creation d'une visite virtuelle en 3D, Stitcher Express cree un 
panorama dont la precision depend en grande partie de la prise de vue 
initiale. Vous devez realiser au minimum six cliches en conservant un 
axe de rotation similaire et en les faisant se chevaucher d'environ 25 % 
pour realiser des raccordements precis. 



| Pour plus d' informations sur ['installation de Photoshop 
Elements, reportez-vous a la section Compresser des images 
pour le Web de ce chapitre. 
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Preparer les photos dans Photoshop 
Elements 

Avec ses nombreuses fonctions de retouche d' images et ses filtres 
predefinis, Photoshop Elements s'avere un outil performant qui vous 
permettra de corriger facilement toutes les imperfections de vos photos 
avant de les exporter dans Stitcher Express, charge de la creation du 
panorama et de la transformation au format Quick Time VR. 

1 Dans Photoshop Elements, ouvrez simultanement six photos au 
minimum avec la commande Fichier/Ouvrir. Pour selectionner 
plusieurs images, maintenez la touche [Ctrl) enfoncee. 




I J I I 

DSC k. 




■ 



1 



Figure 8.50 : 

Retouche rapide 
des photos 
destinees a la visite 
en 3D 



2 Avant de demarrer 1' importation dans le logiciel Stitcher Express, 
activez la commande Accentuation/Retouche optimisee 
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automatique, pour homogeneiser de facon automatique couleurs, 
contraste et lumiere de vos photos. 

Lorsque vous etes satisfait du resultat, enregistrez chaque photo 
au format JPEG, en conservant les memes parametres 
d'optimisation, avec la commande Fichier/Enregistrer pour le 
Web. 

Pour plus d' informations sur la compression JPEG, reportez- 
vous a la section Optimiser des images pour le Web de ce 
chapitre. 












Installer Stitcher Express 

Stitcher Express permet de creer des panoramas a partir d' images 
juxtaposees et va meme plus loin en proposant des representations plus 
complexes sous forme de cubes, de cylindres ou de spheres, qui 
pourront etre convertis par la suite au format Quick Time VR. Ce format 
video peut facilement etre exporte pour une publication web. 

1 Ouvrez votre navigateur Internet. Une version d' evaluation en 
francais de Stitcher Express est disponible sur le site de l'editeur, 
a l'adresse http://stitcher.realviz.com/7language =FR. 




Figure 8.51 

Express 



Telechargement de la version devaluation de Stitcher 
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Cliquez sur le lien Telecharger, puis indiquez une adresse e-mail 
valide. Creez un mot de passe en cochant le bouton radio Non, je 
vais en creer un maintenant, puis cliquez sur le bouton VALIDER. 

Apres la creation de votre compte, vous pouvez acceder a la page 
de telechargement du logiciel. 

Dans la liste deroulante correspondant au logiciel Stitcher 
Express, selectionnez la version francaise de 78 Mo et cliquez sur 
le lien Telecharger. 



REMARQUE 



Les limites de la version devaluation 

La version devaluation ne vous permettra pas d'enregistrer votre 
travail et ne vous donnera pas acces a toutes les fonctions disponibles. 
Aussi, si vous souhaitez aller plus loin, vous devrez acquerir la version 
complete, disponible en ligne sur le site pour la somme de 99 euros. 



Importer les images dans Stitcher Express 

1 Avant de demarrer toute creation au sein de Stitcher Express, 
creez un nouveau projet. Apres l'ouverture du programme, 
selectionnez la commande Fichier/Nouveau Projet sous l'onglet 
Demarrer. 

2 Choisissez sur votre ordinateur les images a utiliser en cliquant 
sur l'icone Charger les images. Pour selectionner plusieurs images 
en meme temps, maintenez la touche [ Otrl ) enfoncee. 

3 Apres avoir ete chargees, les images apparaissent 
automatiquement sous forme de vignettes au sein de la galerie 
d' images, correspondant a la large bande situee en bas de votre 
fenetre. Modifiez la taille des vignettes via le menu 
Edition/Preferences pour avoir un meilleur apercu des cliches 
importes. 



REMARQUE 



Privilegier le format JPEG 

Plus d'une dizaine de formats d' images sont pris en charge. Mais pour 
une utilisation ulterieure sur le Web et pour eviter de trop solliciter votre 
ordinateur lors du rendu 3D, preferez des formats deja compresses tels 
que JPEG. 
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Vous pouvez au choix utiliser des images horizontales ou 
verticales. Dans ce dernier cas, si vous n'avez pas encore effectue 
la rotation necessaire, selectionnez toutes les images de la galerie 
d' images avec la combinaison de touches [Ctrlj +fA], puis utilisez la 
commande Edition/Rotation/90°horaire. 



. Mttal »»•»» 



jlomtiqucmanl la lunwciite i! 
rrfc4o.il 




Figure 8.52 : Importation des images dans Stitcher Express 



Creer un panorama a partir des photos 

La construction du panorama est le prealable indispensable a la 
realisation d'une visite virtuelle en trois dimensions. 

1 Cliquez tout d'abord sur l'onglet Assembler pour raccorder le 
plus precisement possible les cliches importes. 

2 Selectionnez la premiere image et placez-la dans la fenetre 
principale appelee Fenetre de stitch. Celle-ci apparait maintenant 
en taille reelle. 

3 Pour passer a la creation du panorama, deplacez au sein de la 
fenetre principale vos differentes photos de sorte a les aligner. 

4 Lorsque l'alignement vous semble correct, cliquez sur l'icone 
Stitcher. Si le raccordement se fait correctement, un petit carre 
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vert apparait dans le coin superieur droit de la vignette 
correspondante. 

Dans le cas contraire, une boite de dialogue vous propose 
d'ajuster manuellement les photos ou bien de forcer l'alignement, 
meme si celui-ci n'est pas valide par Stitcher Express. 

Afin de reussir votre panorama, il est conseille de deplacer 
vous-meme les photos, avec le bouton gauche de la souris, pour 
unraccordement plus precis. Faites appel a l'outil Zoom 
( |Ctrl| +(Ait]+clic), tout en faisant glisser la souris de l'avant vers 
l'arriere. 

Lorsque le raccordement d'une image laisse a desirer, un petit 
carre orange s'affiche dans le coin superieur droit de sa vignette 
dans la galerie d' images. Evitez de recourir a ce type 
d' assemblage trop souvent car des decalages importants risquent 
d'apparaitre au sein de votre montage. 

Si vous n'etes pas satisfait de l'assemblage effectue par le 
logiciel, selectionnez du bouton droit 1' image au sein de la 
Fenetre de stitch et choisissez Destitcher I'image dans le menu 
contextuel. Un cadre rouge situe autour de I'image indique que 
celle-ci peut de nouveau etre deplacee. 




Detacher les images 
Estfner la f ocale 


Efface 


Affichage 
Centrer 


► 


Recharger I'image a partj <Ki <fcque 
Assistant de masques 


Proprietes... 


Alt+Entiee 



Figure 8.53 : Destitcher I'image permet d'assembler manuellement 
les cliches 
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Utiliser I 'Assistant de masques 

Lors d'une prise de vue panoramique, des objets bougent parfois entre 
deux prises de vue. Dans ce cas, un flou disgracieux peut apparaitre sur 
la photo. Pour compenser cet effet, Stitcher Express dispose d'un 
Assistant de masques particulierement pratique. 

1 Selectionnez tout d'abord I'image a laquelle doit etre appliquee le 
masque au sein de la Fenetre de stitch. Activez la commande 
Outils/ Assistant de masques. 










Figure 8.54 : Le masque dissimule les zones floues d'une image 

2 Double-cliquez sur I'image pour definir le point de depart du 
masque. Creez la forme adequate, puis double-cliquez de nouveau 
pour fermer le masque. 

3 Selectionnez ensuite la commande Preserver pour conserver la 
zone selectionnee ou Supprimer pour l'effacer. 

4 Pour enregistrer les modifications, cliquez sur le bouton Fermer. 

Optimiser les raccords 

1 Au fur et a mesure de 1' insertion de nouvelles images, deplacez 
votre panorama a l'aide du raccourci [Aitj+clic. Pour visualiser vos 
images en plein ecran, activez la commande Fenetre/Plein ecran, 
via l'icone ad hoc dans la barre de menus. 
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Lorsque toutes les images ont ete assemblies, cliquez sur 1'icone 
Fermer le panorama pour realiser une visite virtuelle en 3D. Pour 
ajuster les raccords, cliquez sur l'onglet Faire le rendu. 

Pour ajuster alignement et luminosite entre les images du 
panorama, utilisez les options Auto-aligner le panorama et Egaliser 
en cliquant sur les icones correspondantes. 

Pour finaliser la creation du panorama, selectionnez la commande 
Rendu/Egaliser les couleurs. Ce processus d'egalisation va 
limiter le contraste entre vos images. 



Retouche optimisee automatique de Photoshop Elements 

A ce stade de la conception, vous pouvez egalement enregistrer votre 
panorama et 1' exporter sous Photoshop Elements pour retoucher plus 
finement les raccords entre vos cliches grace a la commande Retouche 
optimisee automatique utilisee precedemment. 



Exporter le panorama 

1 Pour definir le format d'exportation, cliquez sur 1'icone Rendre et 
exporter situee sous l'onglet Faire le rendu. Cette operation etant 
particulierement gourmande en kilo-octets, il est conseille de 
fermer les autres applications en cours pour eviter de ralentir le 
processus. 

2 La boite de dialogue Rendu apparait. Dans la section Type, 
selectionnez le format a utiliser. Pour une visite virtuelle en 3D, 
selectionnez QTVR Cubique ou QTVR Cylindrique. La taille de votre 
fichier se definit sous l'onglet Parametres QTVR de la fenetre 
Parametres de rendu (voir Figure 8.55). 

3 Pour avoir un apercu succinct de votre projet et eviter un rendu 
long et inutile, activez l'onglet Zone de rendu, puis cliquez sur le 
bouton Previsualiser. Le resultat s'affiche en petit format, mais 
vous donne deja un apercu precis de ce que vous obtiendrez en 
taille reelle. 

4 Dans la version devaluation, le bouton Rendre n'est pas 
disponible. Vous devrez done vous contenter de cette etape de 
previsualisation pour evaluer les qualites du logiciel. 

5 L' exportation prend de une a plusieurs minutes selon votre 
configuration. Vous etes informe de l'etat d'avancement du rendu 
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grace a une barre de defilement en pourcentage. Plus le nombre 
d' images est important, plus le rendu sera long. 



Parametres de rendu 



* 



Options de Rendu 

Choisisse2 vos options de rendu, 



Fichier | Parametres QuickTime | Parametres QTVR 
Proprietes de rendu 



Fichter 






Type J QTVR Cubique V 



N/A 



Photo - JPEG - Haute qualite (60%) 

:.. • Rognage Automatiqu* '.. '.-. Rogne»- *ve>: is zone cte r-ndu 



Largeur 136^ 


(£jj Tailte maximale (%): 


L ,oo 13 








Hauteur 3672 


liJ ' 


j 



Pour en savoir plus 




Le rendu OijicktimeiB 1 cuhKT-? ctee L-ri& •?;*:■,&£■ compfeti? 
correipondant 6 un (ictJ*» cubi'TJC- \^>:: tif e®. Ucilisf^ce iii& 

CD-Rom. 



Rendre 



Previsualiser 



Fermer 



Annuler 



Figure 8. 55 : Selection des options de rendu 

6 Si vous avez opte pour le format Quick Time VR, cliquez sur le 
fichier nouvellement cree sur votre ordinateur pour l'ouvrir dans 
le Player Quick Time, disponible gratuitement sur le site d' Apple, 
a l'adresse www.apple.com. 



Inserer la video dans une page web 

1 Pour inserer une video dans une page web, faites appel a un 
editeur web tel que Dreamweaver. Ouvrez votre page web avec la 
commande Fichier/Ouvrir. 
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S 11 Pour plus d' informations sur V integration de medias avec 
renvoi Dreamweaver, reportez-vous au chapitre Alter plus loin avec 
Dreamweaver. 

2 Selectionnez la commande Insertion/Medias/Plug-in. Vous 
pouvez utiliser ce menu pour importer des fichiers Quick Time 
VR bien sur, mais aussi des fichiers son (WAV, MP3...) ou 
d'autres formats video (AVI ou WMV). 

3 Dans la boite de dialogue qui apparait, choisissez le fichier Quick 
Time VR prealablement sauvegarde sur votre ordinateur. Votre 
video apparait sous forme d'icone au sein de Dreamweaver. 

4 Par defaut, l'icone video est de petite taille (32 x 32). II est done 
indispensable de modifier les dimensions pour les ajuster a celles 
de votre video. Pour ce faire, dans la fenetre des proprietes, reglez 
les options L (Largeur) et H (Hauteur). 

5 Pour visualiser le resultat obtenu, selectionnez la commande 
Fichier/Apercu dans le navigateur. Pour visionner votre video, 
l'internaute doit obligatoirement posseder le plug-in Quick Time. 
Si celui-ci n'est pas installe, le visiteur sera renvoye vers le site 
officiel Apple a l'adresse www.apple.com pour telecharger la 
derniere version du Player en cours. 



8.6. Atelier : Un menu pour le Web 

Apres que vous avez cree au sein de Photoshop Elements les elements 
composant votre site web, le logiciel Photoshop va se charger de 
decouper 1' interface en tranches et de la transformer en un tableau 
HTML au sein duquel vous n'aurez plus qu'a inserer votre texte. 

Avantage de cette technique : vous pouvez laisser fibre cours a votre 
creativite sans pour autant passer du temps sur 1' integration HTML de 
r interface, habituellement reservee a des webmasters aguerris. 



Installer Photoshop 

La derniere mouture de Photoshop, logiciel de traitement d' images et de 
creation de graphiques pour le Web, offre la possibilite de realiser 
rapidement et d'optimiser des elements de navigation pour son site web. 
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Photoshop fonctionne a l'identique de Photoshop Elements mais s'avere 
beaucoup plus complet pour repondre aux exigences des professionnels. 

1 Pour telecharger une version d' evaluation de Photoshop, rendez- 
vous a l'adresse www.adobe.fr. Cliquez sur le lien Produits et 
selectionnez Photoshop. 

2 Dans la section Telechargement, choisissez Version devaluation . 
Entrez votre identifiant Adobe ou creez un nouveau compte. 



Utbt SOLUTIONS PROOUITS SUPPORT COMMUIIAUrES SOCIETE TELECHARGER STORE 



Voire compte Contact France (rnodife) 
CH6RCHEH 



Photoshop : See What's Possible 



La gamme de logidels Adobe* Photoshop® n'a pas son parell pout reveler le meilleur de vos images numeriques et les modifier a 
lolsir. II wist* fotcement un logiciel Photoshop adapte a vos besoms' i 




Adobe Photoshop C S3 
Mettez a pro* ramelloratlon des 
processus et de la productjvite grSce a 
des Otitis de retoucfie hors pair et des 
tonctJons de compositing 
revolutlonnaires 

La solution Ideate pour les : 
Pholographes prolesslonnels" 
Photographes amateurs* 



Adobe Photoshop C S3 Extended 
Beneficie: de toutes les 
tonctionnalfies de Photoshop CS3 
ainsl que de nouveaux outils de 
retouche de contenu 3D et anlme et 
d' analyse d'lmages. 

La solution ideale pour les : 
Professionnels du cinema, de la 
video etdumuitlmidla 

Graphistes et concepteurs de siles 



Adobe Photoshop Llghtroom 
Decouvrez un moyen efficace cfimporter. 
de s«lectJonner, de developper et 
tfexposer dlmportantas quanmes 
crimages numerlques. 

Adobe Photoshop Lightroom™ est le 
partart complement de Photoshop CS3 

La solution Ideale pour les : 
Photographes professionnels 



Figure 8.56 : Telechargement de la version devaluation 

Dans la liste deroulante, choisissez la version en francais 
correspondant a votre systeme (Mac ou Windows), puis cliquez sur 
le bouton Telecharger. Le programme pese plus de 300 Mo, la 
connexion haut debit est done indispensable (environ 10 a 
20 minutes de telechargement). 

Double-cliquez pour lancer 1' executable, puis selectionnez un 
emplacement sur votre disque dur. Pour lancer Photoshop, rendez- 
vous dans le menu Demarrer/Adobe/Photoshop CS3. L' interface 
d'Image Ready s'affiche. 
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Creer une barre de navigation 

Photoshop permet non seulement de retoucher et d' optimiser des images 
pour le Web, mais aussi de creer des barres de menus qui pourront 
ensuite etre animees avec Dreamweaver. 

Pour la creation de menus interactifs, Dreamweaver genere ensuite 
facilement des images "roll-over". Lors du survol du curseur sur une 
image, celle-ci est modifiee. 

Dessiner le menu 

1 Ouvrez un document de 500 pixels de large sur 80 pixels de haut 
avec la commande Fichier/Nouveau. Conservez les autres options 
par defaut. 



Nom:|Menu 
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Arnuler 



Enregbtrer le parametre predefini,.. 



Z-jptstesst k' cmxtabe predefc'i 



Device Central... 



Tale de llmage : 
117,2 Ko 



Figure 8.57 : Creation d'un nouveau document 



Activez l'outil Pot de peinture (g) et remplissez 1' image avec la 
couleur de votre choix. 

Selectionnez l'outil Rectangle arrondi ((U)). Definissez une 
nouvelle couleur de premier plan, de preference plus claire que la 
couleur de fond, puis dessinez quatre boutons sur 1' image en 
maintenant le bouton gauche de la souris enfonce (voir 
Figure 8.58). 

Un caique d'arriere-plan et quatre caiques distincts ont ete 
automatiquement crees dans le panneau Caiques 
(Fenetre/Calques). Selectionnez l'outil Texte ((T)) de la barre 
d'outils. 
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Figure 8.58 : Ajouter les onglets 



Les options de texte s'affichent dans la barre d' options. 
Choisissez votre police, une taille de texte et une couleur dans les 
listes deroulantes correspondantes. 




Figure 8.58 : Insertion du texte 
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Fusionnez les caiques pour obtenir un caique pour chaque bouton. 
Pour ce faire, dans le panneau Caiques, selectionnez les caiques 
deux par deux en maintenant la touche [Map enfoncee, puis 
selectionnez la commande Calque/Fusionner les caiques. 

Le panneau Caiques contient de nouveau cinq caiques distincts, 
quatre caiques correspondant aux boutons a animer et un caique 
d'arriere-plan verrouille. 



ASTUCE 



Creer des caiques distincts 

Si vous concevez un bouton dans le but de 1' animer, il est preferable 
de separer chaque etat au sein d'un caique distinct. En 
affichant/masquant les differents caiques qui composent le bouton, vous 
pouvez deja avoir un apercu du resultat final. 



Decouper chaque bouton en tranches 

Un etat de transformation par souris va etre cree pour chaque onglet. Les 
tranches permettent de subdiviser une image en plusieurs zones 
rectangulaires, qui pourront avoir des parametres distincts d' optimisation. 

1 Avant d'etre anime, chaque bouton doit etre transforme en 
tranche. Selectionnez le premier caique puis selectionnez la 
commande Calque/Nouvelle tranche d'apres un caique. 



Selection Filtre Analyse Affichage 

Nouveau 

Dupliquer le caique. . . 

Supprimer 



Proprietesdu caique... 
Style de caique 

Rltre dynarmque 



Nouveau caique de remplissage 
Nouveau caique de reglage 
Modifier le contenu du caique 
Options de contenu de caique. . , 



Masque de fusion 
Masque vectoriel 
Creer un masque d'ecretage 



Alt+Ctrl+G 



Objets dynamiques 
Caiques video 
Caiques 3D 
Terte 

Pixeliisation 



Nouvelle tranche d'apres un calqi, 



Figure 8.80 : 

Creation d'une nouvelle tranche 
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Votre caique est automatiquement transforme en tranche. Une 
icone de tranche s'affiche au sein de 1' image afin qu'elle soit plus 
facilement reconnaissable. 

La tranche determine la zone reactive de 1' image, animee par la 
suite. Renouvelez 1' operation avec les trois autres boutons pour 
obtenir au total quatre tranches. 



Menu « 100% (Contact. RVB/8) 



. " X 




Figure 8.61 : Transformation des images en tranches 



Creer des etats de transformation par souris 

Une transformation par souris est composee de deux elements : une 
image, celle d'un bouton par exemple, et un evenement declencheur 
genere par I'internaute. L' animation doit comporter au minimum deux 
images. Lors du passage du curseur sur le bouton, l' image est modifiee. 

On distingue cinq principaux types d'evenements declencheurs : 

le clic, lors d'une pression sur le bouton gauche de la souris ; 

le survol du curseur, lors du passage du curseur sur une image, 

sans clic ; 

le roll-out, lorsque la souris se retire de la zone reactive ; 

la pression du bouton de la souris (sans relachement, 

contrairement au clic) ; 

le relachement du bouton de la souris. 

1 Affichez le panneau Caiques avec la commande Fenetre/Calques. 
Les tranches creees precedemment s'affichent dans la section 
Caiques. 

2 Votre menu comporte au total cinq caiques : quatre caiques pour 
les boutons et un caique pour l'arriere-plan. 
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Figure 8.62 : Organisation des caiques 

3 Afin de creer un effet de roll-over sur chaque image, selectionnez 
le premier caique de bouton et dupliquez le caique avec la 
commande Calque/Dupliquer le caique. Renommez le caique en 

Rollover Accueil. 

4 Repetez la manipulation pour les trois autres boutons du menu 
sans oublier de renommer chaque caique. 
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Duplication de caiques 
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Modifier I'aspect du bouton lors d'un etat 
de transformation par souris 

Lors du survol de la souris, I'aspect de votre bouton va etre legerement 
modifie : ajout de styles, modification de couleur ou de taille par exemple. 

1 Maintenant que vous avez cree de nouveaux caiques pour definir 
l'apparence de votre bouton lors du survol de la souris, il est 
necessaire d'en modifier I'aspect. Affichez le panneau Caiques et 
selectionnez le caique correspondant a l'etat de survol du bouton. 

2 Cliquez du bouton droit sur ce caique et choisissez Caique/Style 
de caique/Ombre interne dans le menu contextuel. 

3 Conservez les options par defaut et validez par un clic sur le 
bouton OK. Une ombre de couleur noire apparait sur le bouton. 
Celle-ci ne sera visible que lors du survol du curseur sur le 
bouton. Un nouveau symbole s'affiche egalement a droite du 
caique correspondant pour signaliser 1' ajout d'un style. 




Options de fusion : Par defaut 
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Figure 8.64 : Ajout d'un style de caique 

Renouvelez l'operation pour les quatre autres boutons. L'ajout d'un 
style de caique est l'une des nombreuses possibilites utilisees pour 
modifier un etat de transformation par souris. Mais vous pouvez aussi 
changer son opacite ou faire appel aux outils de la barre d'outils. 

Pour avoir un apercu de 1' effet de transformation par souris au 
sein de 1' interface de Photoshop, activez et desactivez l'icone de 
l'ceil situe dans le panneau Caiques sur chaque bouton. 
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Figure 8.65 : 

Apercu des 
changements dans 
le panneau Caique 
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Desactiver I'affichage 

Pour desactiver I'affichage des symboles de tranche au sein de votre 
document, decochez la commande Affichage/Afficher/Tranches. Vous 
pourrez ainsi mieux vous rendre compte de 1'effet obtenu. 



Creer de nouveaux etats de transformation 
par souris 

Les etats de transformation par souris se declenchent selon le 



comportement de l'internaute. Si le survol d'un bouton constitue l'etat 
de transformation par souris le plus couramment utilise, vous pouvez 
egalement aj outer de nouveaux etats sur le meme principe afin de 
modifier l'apparence du bouton lors du relachement de la souris. 
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Dans le panneau Caiques, selectionnez un bouton et choisissez de 

nouveau la commande Dupliquer le caique. Nommez-le 

precisement, par exemple Rollout Accueil, afin de pouvoir 

par la suite facilement mettre en place le code javascript 

correspondant. 

Modifiez le style du caique avec l'un des effets proposes ou 

utilisez la barre d'outils de dessin. 



Surveiller le poids des images 



A chaque nouvel etat de transformation par souris ajoute a votre tranche, 
une nouvelle image est generee, augmentant done le poids final du fichier. 



3 Si vous creez plusieurs etats pour chaque bouton, n'hesitez pas a 
creer des dossiers au sein du panneau Caiques en cliquant sur 
l'icone Creer un groupe situe en bas de ce panneau. Les caiques 
places dans un groupe sont legerement decales vers la droite. 



j Caiques x 



Normal 



V Opacite : i 100% 



J *i* A For, d : pt oo»"^ 



3 Rollover Contact 



9» Effets 



9 Ombre portee 



I ' - .I Contact 



l I i Rollover CV 
• Effets 



9 Ombrt portee 



I <■■■ I Cv 



Bouton Parcours 



A 



w 
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Rollover Parcours 
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Effets 




9 Ombre portee 
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Rollover Accueil 
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Figure 8.66 : 

Ajout de dossiers 
dans le panneau 
Caiques 



LE GUIDE COMPLET 



439 



Optimiser des images pour le Web 

Finaliser et enregistrer le menu dans 
Photoshop 

Pour finaliser la creation du menu, vous devez ajouter des liens. Les 
options de tranche disponibles dans Photoshop permettent d' ajouter des 
liens directement sur les tranches. 

1 Activez l'outil Selection de tranches (Q<)) au sein de la barre 
d'outils Dessin. Selectionnez Fun des boutons du menu puis 
cliquez du bouton droit de la souris et choisissez 1' option Modifier 
les options de tranche. 

2 Nommez la tranche .Specifiez l'adresse web, une cible pour cette 
tranche ainsi qu'un texte de remplacement au sein du champ Alt. 
Ce texte apparaitra en infobulle lors du survol de la souris sur 
V image. 



Options de tranche 



Type de tranc 
Nom 


he : Image v 


Accueil 






URL 


www.monsite.corn/accLieil.gif 


Gble 
Message 




1 1 










Instruction Alt 


Retour a l'accueil| 








Annuler 



Dimensions 





X : [281 L : | 147 


Y: j 15 H : [35 



Type d'arriere-plan de la tranche : Sans v 



Figure 8.67 : Ajout d'un lien a une tranche 

3 Lorsque la creation du menu est finalisee, enregistrez-la au format 
Photoshop (extension *.PSD) avec la commande 
Fichier/Enregistrer sous. Tous les caiques crees sont conserves 
pour une modification ulterieure. 

Integrer le menu dans une page HTML 
avec Dreamweaver 

Votre menu est maintenant pret. II ne reste plus qu'a 1' integrer dans une 
page HTML. Photoshop inclut une fonction de decoupage permettant 
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d' integrer automatiquement un menu dans un tableau HTML, sans se 
preoccuper du code ni de 1' integration. 

Votre menu sera decoupe en zones rectangulaires. L'internaute ne verra 
aucune demarcation. Chaque tranche peut etre optimisee et transformee 
independamment des autres. 

De plus, lors de la publication sur le Web, le chargement d'une image 
fractionnee en plusieurs fichiers semble plus rapide que le chargement 
de cette meme image sous forme d'un unique document volumineux. 

Compresser chaque tranche pour le Web 

1 Dans le panneau Caiques, masquez les caiques de rollover et de 
rollout a l'aide de l'icone de l'ceil. 

2 Activez la commande Fichier/Enregistrer pour le Web. 

Selectionnez la premiere tranche. Dans la liste deroulante Format, 
choisissez parmi les cinq propositions, le format dans lequel vous 
souhaitez enregistrer votre tranche : GIF, JPEG, PNG-8, PNG-24, 
WMP. Dans cet exemple, le format GIF s'avere le plus approprie. 

3 Selectionnez ensuite les autres tranches et definissez le format 
d'optimisation souhaite. Photoshop permet au sein de sa fenetre 
d'enregistrement pour le Web d'affecter des parametres 
d'optimisation differents aux tranches d'un meme document. 




Figure 8.G8 : Optimiser une tranche 
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4 Enregistrez ensuite les images composant les effets de 
transformation par souris (rollover et rollout) independamment les 
unes des autres avec la commande Fichier/Enregistrer pour le 
Web. Photoshop ne permettant pas l'insertion du code javascript 
necessaire aux etats de transformation par souris, cette etape se 
deroulera ulterieurement depuis Dreamweaver. 

Publier le menu au format HTML 

Derniere etape, c'est 1'enregistrement et la publication du menu pour 
une utilisation sur le Web. Photoshop permet d'enregistrer un document 
decoupe en tranche directement au format HTML pour une integration 
facilitee. 



1 



Apres selection des parametres d' optimisation pour les differentes 
tranches composant le menu, cliquez sur le bouton Enregistrer. 
Dans la liste deroulante Type, choisissez 1' option HTML et images. 
Selectionnez un emplacement sur votre ordinateur pour 
sauvegarder le menu, puis cliquez sur le bouton Enregistrer. 



Nom du lichiet : 
lype: 

Paramettes : 

Tranches : 












ffiBffflO 




V 


j Enregistier | 




HTML et images ("html) 




V 


| Annuler | 














XHTML 


V 













Figure 8.69 : Enregistrement au format HTML 

Ouvrez la page dans un navigateur Internet. Le menu HTML a 
automatiquement ete integre dans un tableau HTML dont les 
bordures sont invisibles. Votre menu est d'ores et deja 
operationnel puisque chaque bouton comporte un lien mais les 
effets de survol ne sont pas encore actifs. 




Figure 8. 70 : Apercu du menu dans une page HTML 
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RENVOI 



Pour plus d 'informations sur la creation de tableaux, reportez- 
vous au chapitre Aller plus loin avec Dreamweaver. 

Ouvrez la page HTML nouvellement creee dans un editeur web 
tel que Dreamweaver via la commande Fichier/Ouvrir. 

Afin d'inserer les effets de transformation par souris, placez la 
souris sur la premiere image de la barre de navigation. Choisissez 
la commande Insertion/Objets image/lnserer une barre de 
navigation. 

Renommez le premier element de la barre de navigation, dans cet 
exemple accueil. Selectionnez sur votre ordinateur 
l'emplacement de 1' image haut, correspondant a 1' image visible 
par defaut puis de 1' image dessus (rollover) et eventuellement 
abaissee (rollout). 



eter une barre de navigation 



se 

Elements de la barre de navigation : pWff*| 



3@ 



Nomd'etement: Acow' 1 



Image Haut : Accuelgrf 



Image Dessus : Rollover_accueil.gif 
Image Abaissee : RoHout_accueil.gif 
Image Au-dessus lorsque Abaissee : 



Terte secondare : Retour a raccue«| 
Sidque, aferaruRL: 



I G 



: l pa ^ 

Options ; Precharger les mages 

□ Montrer "Image Abaissee - initialement 



is Fenetre prindpale v] 



Inserer : ' Horteontalement 



El Utilser tableaux 



Figure 8. 71 : Insertion de la barre de navigation avec Dreamweaver 

Cliquez ensuite sur le bouton + situe au dessus du cadre des 
elements de navigation afin d'inserer de nouveaux boutons et 
renouvelez les etapes precedentes. Lorsque tous les boutons de 
votre menu ont ete inseres, validez par un clic sur le bouton OK. 

Votre menu est pret, activez la commande Fichier/Apercu dans le 
navigateur pour tester les elements de transformation par souris. 
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Apres avoir cree et publie votre site en ligne, la derniere etape consiste 
a le faire connaitre au plus grand nombre. Or il n'est pas toujours 
evident de se faire remarquer face aux milliers de nouvelles pages web 
creees quotidiennement. 

Meme si votre site repond a tous les criteres de reussite attendus, sans 
referencement, il restera tres difficile de le faire sortir du lot. 
Neanmoins, il faut distinguer les sites personnels destines uniquement a 
vos proches, tels que les albums photo ou les blogs, des autres sites plus 
generalistes destines a etre vus par le plus grand nombre. 

Dans la premiere categorie, communiquez l'adresse de votre site par 
mail s'averera suffisante. Dans le second cas, l'inscription dans un 
annuaire ou un outil de recherche constituera une etape cle. Une fois 
votre site visible, il s'agira d'ameliorer son positionnement. 

Le referencement reste une etape cruciale utilisee par la majorite des 
internautes. On distingue deux types d'outils : 

Les annuaires qui necessitent une inscription gratuite ou payante. 
Depuis quelques annees, le referencement gratuit a laisse place a 
une offre payante. Celle-ci ne garantit en aucun cas 1' acceptation 
de votre site ni son affichage dans la categorie specifiee. 

Les moteurs de recherche dont les robots se chargent de detecter 
les nouvelles pages et de les referencer automatiquement, sans 
inscription prealable. 

Les autres points d'entree etant constitues par le bouche a oreille, 
l'echange de liens ainsi que la saisie directe d'une adresse web dans le 
navigateur. 



9.1 . Optimiser son site pour les outils 
de recherche 

Principal ecueil, se precipiter pour referencer son site, celui-ci a peine 
termine. Un site en travaux ou contenant seulement quelques pages non 
mises a jour aura peu de chances d'etre pris en compte. Une seconde 
soumission risque d'etre par defaut vouee a l'echec, meme si entre- 
temps, vous avez apporte quelques ameliorations. 



446 



LE GUIDE COMPLET 



Optimiser son site pour les outils de recherche 



Chapitre 9 



REMARQUE 



Les principaux moteurs de recherche 

Incontestablement, le moteur de recherche le plus utilise reste Google, 
disponible en francais a l'adresse www.google.fr. Mais ne negligez pas les 
outils alternatifs tels que Altavista France, a l'adresse www.altavista.fr ou 
Mozbot, a l'adresse www.mozbot.fr. D'autres adresses sont disponibles dans 
la webographie de cet ouvrage. 



Inserer des balises META 

Contrairement aux annuaires, I' indexation dans les moteurs de recherche 
est automatique sitot votre site mis en ligne. Les moteurs fonctionnent 
grace a des robots (appeles aussi spiders ou crawlers) qui balayent 
quotidiennement plusieurs millions de pages web. 

Afin d'ameliorer la prise en compte de votre site par certains moteurs de 
recherche, il est necessaire d' inserer des balises <META>. Les balises 
<meta> influent sur certains moteurs de recherche tels qu'Altavista, 
Lycos, Hotbot ou Voila, mais elles seront inefficaces avec Google. 

Ces balises <meta> sont chargees de resumer en quelques mots le theme 
de votre site. Ces balises <meta> se placent dans le code source de la 
page et seront interpreters par les robots des outils de recherche. 

Procedez ainsi : 

1 Afin d' inserer des balises META dans une page web, faites appel a 
un editeur web tel que Dreamweaver. Ouvrez la page web avec la 
commande Fichier/Ouvrir. 

2 Dans Dreamweaver, une zone de texte nommee Titre, en haut de 
votre page, permet d'entrer un titre a votre page. Si vous ne voyez 
pas cette zone, vous pouvez la faire apparaitre depuis le menu 
Affichage/Barresd'outils/Documents. 



REMARQUE 



Choisir un titre efficace 

Le titre de la page sera repris en tant que lien dans le moteur de 
recherche, il done important que celui-ci soit aussi precis que possible. 
Evitez les titres du type Bienvenue sur mon site qui n'apporteront aucune 
information. Par exemple, pour un carnet de voyages consacre a l'Asie, 
indiquez un titre du type Recits de voyage, Asie, Chine et Japon. Lors de la 
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saisie des mots voyages et Chine, 1'internaute aura ainsi toutes les 
chances de trouver votre site. 




Figure 9. 1 : Ajout d'un titre dans une page web avec Dreamweaver 

3 Vous devez rentrer le maximum d' informations au sein des balises 
meta de votre site web. Pour acceder a ces balises depuis une 
page ouverte dans Dreamweaver, selectionnez la commande 
Insertion/HTML/Balises d'en-tete. Arm de definir les mots-cles 
caracterisant le mieux votre site, choisissez la categorie Mots- 
cles. 



Insertion Modifier Texte Commandos Site Fenetre 

Balise... Ctrl+E 

Image Ctrl+Alt+I 

Objets image 
Medias 



Tableau 

Objets du tableau 

Objets mise en forme 



Ctrl+Alt+T 




Forrnulaire 



Hyperlien 

Lien de messagerie 

Ancre nommee 

Date 

Commentaire 



Ctrl+Alt+A 



Qjt &% ft. r 1, 



: 



111? 




Objets de modele 



Personnaliser les favoris... 
Telecharger d'autres objets. . . 



Barre horizontale 
► Cadres 

Objets texte 
Objets Script 



Balises d'en-tete 





Caracteres speciaux ► 



:j Consetetur s 



Figure 9.2 : Insertion d'une balise META avec Dreamweaver 
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La boite de dialogue Mots-cles s'affiche. Dans la zone de texte 
Mots-cles, vous allez pouvoir inserer des mots-cles lies au theme 
de votre site. Une dizaine de mots suffit. Au-dela, ils sont 
rarement pris en compte par les moteurs de recherche. Validez par 
un clic sur le bouton OK. 



Mots-cles 





Mots-cles : 








OK 






Japon, photo, voyage, recits, japonais, 
Tokyo, manga, Akihabara 






Annuler 








| Aide 















Figure 9.3 : La boite de dialogue Mots-cles 

Arm de completer cette zone de texte, mettez-vous a la place de 
1'internaute effectuant une recherche sur le theme de votre site. 
N'hesitez pas egalement a realiser quelques essais dans un outil 
de recherche tels que Google afin de verifier la pertinence des 
mots-cles choisis. 

Pour donner une courte description de votre site, choisissez la 
commande Insertion/HTML/Balises d'en-tete/Description. Dans 
la zone de texte Description, preparez une description exhaustive 
de votre site en evitant de repeter les mots-cles entres 
precedemment. 

Une balise Meta Description bien con?ue comprendra environ 
de 150 a 200 caracteres. Idealement, inserez une balise Meta 
Description au sein de chacune des pages de votre site. 



Editer automatiquement ses balises META 

Si vous ne possedez pas d'editeur web, une application gratuite 
disponible sur Internet se charge d'editer les balises de vos pages web. 

Installer nlbusMetaEditor 

1 Ouvrez votre navigateur Internet et connectez-vous a l'adresse 
http://nlbusmeta.nlbus-exp.com/. Sur la page d'accueil, cliquez sur 
le lien Telechargement. 
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hcNer Edbon AttKhage favora Out* t 
I Hm |jj)l«H.:ffnH»»™««nlbi«-«<[>.ci»iV " ' " 



v'B« 




Figure 9.4 : n 1 busMetaEditor genere automatiquement les balises 
META 

2 Telechargez la derniere version de nlbusmetaeditor. 
Decompressez le fichier ZIP obtenu avec un logiciel de 
decompression tel que Winrar. 

3 Double-cliquez sur le richer executable afin de lancer 
l'installation sur l'ordinateur. Cochez la case J'accepte les termes 
et conditions de I'accord ci-dessus puis cliquez sur le bouton 
Suivant. 

4 Par defaut, l'installation se deroule au sein du repertoire 
C:\Program Files\N1 busMetaEditor. Cliquez sur le bouton Parcourir 
pour choisir un autre emplacement. 

5 Cliquez sur le bouton Installer puis lancez 1' application. 
L'interface du logiciel apparait a l'ecran. 

Creer ses balises META 
avec n1 busMetaEditor 

1 A droite de l'interface, entrez un nom dans le champ Document de 
balise, par exemple sitejneta. 
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2 Cliquez sur l'onglet Balises Page. Inserez le titre de votre page, 
une description et les mots-cles dans les champs de texte 
correspondant. 

3 Definissez si necessaire des categories et sous-categories pour 
votre site en selectionnant un theme dans les listes deroulantes 
correspondantes. 
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Document de babies : 



Ceil le nom que vous donnez pour enregislier le document de barues. 
Enlie? par exemple le nom de votre s*e. 



Figure 9.5 : Configuration des balises META 

Conservez les autres options par defaut et validez par un clic sur 
le bouton Voir les balises META. 

Le code a inserer dans la page s'affiche automatiquement. Cliquez 
sur le bouton Copier dans le Presse-papiers. Collez le code dans 
votre page web en mode Source, au sein des balises d'en-tete. 



REMARQUE 



Editer ses balises avec Meta Edit 

A l'adresse www.progra-net.com, cliquez sur le bouton Logiciel dans la 
section Telechargements. Vous pourrez telecharger gratuitement un autre 
editeur de balises META. Selectionnez la page web a editer ; une 
douzaine de balises meta parmi les plus utilisees peut etre parametree. 
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Definir les fichiers a indexer par les robots 

Les moteurs de recherche utilisent des robots qui scrutent toutes les 
pages publiees quotidiennement. A 1'aide d'un fichier specifique place 
sur le serveur web, il est possible de determiner precisement les pages a 
indexer et eviter ainsi que certaines repertoires personnels ou proteges 
soient egalement pris en compte par les moteurs de recherche. 

Ce fichier au format texte que vous nommerez obligatoirement robots.txt 
se placera a la racine de votre site, correspondant generalement au 
repertoire www du serveur web. Avant toute indexation, ce fichier sera 
verifie par les robots afin de filtrer les elements a prendre en compte. 

Creer un fichier texte pour les robots 

1 Ouvrez un editeur de texte, par exemple le Bloc-notes de 
Windows. Si vous ne souhaitez pas que votre site soit indexe par 
les robots des outils de recherche, recopiez le code suivant : 

User-agent: * 
Disallow: / 

— La ligne User-agent: *interdit a tous les robots Faeces a 
votre site. 

— La ligne Disallow: / permet de restreindre l'acces des robots 
a votre site web, e'est-a-dire dans ce cas a tout le site web. 

2 Si vous ne souhaitez autoriser qu'un robot, par exemple celui du 
moteur de recherche Google, entrez le code suivant dans votre 
fichier texte : (voir Figure 9.6) 

User-agent: GoogleBot 
Disallow: 
User-agent: * 
Disallow: / 



3 Enregistrez votre page sous le nom robots . txt en minuscules. 
Transferez ce fichier sur votre serveur web, dans le repertoire 

www. 



Pour davantage a" informations sur la publication de fichiers en 
ligne, reportez-vous au Chapitre 10, Publier et promouvoir son 
site web. 
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robots.txt - Bloc-notes 



Fichier Edition Format Affichage 



I- |(Df5c 



user-agent: GoogleBot 
Disallow: 
user-agent: * 
Disallow: / 

I 



Figure 9.6 : 

Creation d'un fichier 
robots, txt 



REMARQUE 



Creer automatiquement le fichier robots.txt 

Particulierement simple a creer, la mise en place du fichier texte peut 
neanmoins etre optimisee a l'aide du logiciel n 1 busMetaEditor, 
disponible a l'adresse http://nlbusmeta.nlbus-exp.com/, aborde dans la section 
precedente consacre a l'edition automatique de meta. Vous y trouverez 
les principaux parametres explicites afin de generer un code 
automatiquement enregistre dans un fichier texte. 



Utiliser la metabalise Robots 

Alternative au fichier texte, la metabalise Robots permet d'indiquer 
pour chaque page HTML de votre site si elle doit etre indexee ou non 
par les robots des moteurs de recherche. Cette methode est a reserver 
aux sites contenant peu de pages. 

Procedez ainsi : 

1 Ouvrez votre page web avec un editeur tel que Dreamweaver 
grace a la commande Fichier/Ouvrir. Selectionnez la commande 
Insertion/HTML/Balisesd'en-tete/Meta. 

2 La fenetre Meta s'affiche. Dans la liste deroulante Attributs, 
selectionnez Nom. Dans le champ de texte Valeur, indiquez 
robots. Dans la zone Contenu, entrez noindex, nofollow. 
Cliquez sur le bouton OK. 
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3 En ouvrant la page en mode Source en cliquant sur l'onglet Code, 
vous devez obtenir le code suivant dans l'en-tete de la page : 

<meta name=" robots" content="noindex, nofollow"> 

— La metabalise robots peut prendre plusieurs valeurs, separees 
par des virgules : [no]index et [no]follow. 

— La valeur index indique que le robot doit referencer cette 
page et la valeur follow que le robot doit egalement suivre 
les liens a l'interieur de cette page. Pour indiquer le contraire, 
ajoutez le terme no devant l'une ou 1' autre des valeurs. 































1 OK | 








v ! Valeur : 


robots 


1 














[ Annuler J 






• J £ 11 
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Figure 9. 7 : Creation d'une metabalise avec Dreamweaver 

Surveiller I'indexation effectuee 
par les robots 

Robots tats est une application gratuite qui permet d' analyser et de 
suivre les visites des robots sur votre site. II s'agit d'un repertoire a 
decompresser qui doit etre place a la racine d'un serveur web supportant 
PHP et MYSQL. 

Un graphique recapitule les visites sur plusieurs mois et vous permet de 
mieux controler I'indexation de vos pages. Seul inconvenient, sa 
configuration est manuelle et risque de freiner les debutants mais avec 
de la methode et en procedant etape par etape, celle-ci reste accessible 
aux neophytes. 

Configurer Robotstats 

1 Ouvrez votre navigateur et entrez l'adresse http://www 
.robotstats.com/telechargement.php. Cliquez sur le 
bouton Telecharger. 
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Telcchargement de Robotstats 

demiere version de Robotstats est la vi.Q. sortie le 11 octobre 2003. dispones *u format ZIP ; 



hiMMML U l 



*js souhanez fair© un lien vers ce site : 

Pour tnse>er un ten te«ie, utilisez ce code HTML : 

iref-"http://inn(.tobotattti3.coou'" clcle-" J Ui(ilyse «■ 
Anslyse Uta robots «eb</a> 

• Pour insurer une vignette, utilise? ce code HTML : 

hcet""'r»tcpi//w«iw.roboc8tais.coW" ticl«-"Analyae <t" 
1»C( stc*-http ://■«. Eobotstoca.coio/ lmaoe5/caS831-ol*" 
vidch-"88" h«ight-"3l" alc-"Googlebot"></o> 

• Vous pouvez aussi copier cette vignette sur votre site ! 



"-• IO«|...r> fyi' I.i.-.m- 



i.qpgftli 
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Egalement pour vous aider <i optimiser votre referencement 

souhaitez ametiorer le rdferencement de votre site ? Comme de nombreuses 
s entreprises, profile? de ['experience des speciahstes en assistant a une 
formation de referencement. 



IJM " RANKING 



Figure 9.8 : Robotstats surveille I'indexation des robots 

2 Selectionnez un emplacement sur votre ordinateur puis 
decompressez le fichier obtenu au format ZIP avec un logiciel 
specialise tel que Winrar, dont une version d' evaluation est 
disponible sur le site www.adc-soft.com/winrar.htm). 

3 Robostats n'est pas une application a installer sur votre 
ordinateur. II est compose de fichiers a parametrer puis a publier 
sur le serveur web. 

4 Selectionnez le fichier config.php situe dans le repertoire Admin. 
Cliquez du bouton droit sur ce fichier et selectionnez la 
commande Ouvrir avec. Dans le menu contextuel, selectionnez 
Dreamweaver. 



&' Pour davantage d' informations sur V utilisation de 
REN voi Dreamweaver, reportez-vous au Chapitre 4, Alter plus loin avec 
Dreamweaver. 
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Affichez la page en mode Code en cliquant sur l'onglet 
correspondant. En bas de la page, vous devez personnaliser le 
code suivant : 

// connexion a la base de donnees : PENSEZ A 

REMPLACER LES "..." PAR VOTRE CONFIG ! 

// 

$RS_C0NNECT = @mysql_connect ( "HOST" , "LOGIN", 

S< "PASSWORD") ; 

$RS DB = @mysql select db("BASE"); 



6 Vous devez remplacer les valeurs suivantes par vos propres 
valeurs en conservant les guillemets : 

— "HOST" : le nom de la base de donnees MySQL, generalement 
du type sql.monsite.com. 

— "LOGIN" : l'identifiant utilise pour acceder a la base de 
donnees. 

— "PASSWORD" : le mot de passe necessaire a 1' identification 
pour acceder a la base de donnees. 

_ "BASE" : le nom de la base MySQL. 

Toutes ces informations vous sont communiquees par l'hebergeur de 
votre site. En cas de doute, n'hesitez pas a le contacter directement afin 
de verifier vos informations de configuration. 



conng.php' 
j Code i ■"} Fractionner ; jj Creation 



JH3_AD»ESSE_ElUiIL ■ "lr.fchi-.e.coa"; 

«RS_TABUJ.OG - "ts_l»g-; II mm lU- 14 Mflllt steckttt let rtliuss 

(RS_TABLE_R0B0TS - "c«_tobot»"; -V km lie 1« t«ble ltet.llUMMCi.lap Mb«* 

«RS_DIR ■ "cobotstats"; // chain du trapectaice tri&»calIatleH de Pofiot^^ars, ^ pattir. .t* la 

// pout 1* ^erection du fti!l Ctavl ; m tfenere une sierra. -dmuiant le debut 
// du Full CtuMi dea 'jii'iu, toty- du. Kull Crwl ;•; pienente et qu'aucuae 
// vuite de robot de Full Ctavl n'4 ete «nr*g\6u:ee dans le« 
/.- SRSjmjJinjVli.JkM'l deii»i«s joiiu 
SR!_IiB_J_DET_r-ULl CRAUl - 2; 



'.' detuiitjon dej cmi'ja.tes I, tt US irar-iraR 

SR3_Dtifcu iiOH_USEP_ACEUT - "decection_u3er_ogent"; 
*RS_DETECTIOH_IP . "detecuon_lp"; 

SRS_fULL_CRABL_IP . "216.239. 46."; 

«RS VERSION . "vl.O"; 



// cruuexiuK a ia biie d- dov.ee> : PINSE2 A tatlkCa. US ".-." MR VOTSE CMFIG 

SRS_COHHICT ■ 8*Y3ql_connect(-3<r.l.Bonslte.coB", "adMn", "*otdepasse , 'j ; 
SRJ_DB - e»ysql_select_dbC»onsit^.co»-); 



Figure 9.9 : Parametrage du fichier de configuration 
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7 Apres avoir entre ces informations, enregistrez les modifications 
apportees a votre document avec la commande 
Fichier/Enregistrer. 



REMARQUE 



Consulter la documentation de Robotstats 

Afin de decouvrir plus en detail les possibilites de Robotstats, 
reportez-vous a la documentation disponible dans le repertoire Docs/fr. 



Transferer Robotstats sur le serveur web 

1 Ouvrez un logiciel de transfert en ligne, selectionnez le repertoire 
robotstats et placez-le a la racine de votre site web, correspondant 
generalement au repertoire www. 
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Figure 9. 10 : 

Transfert des 
fichiers 
Robotstats 
dans le 
repertoire 
racine du site 



Ouvrez votre navigateur et entrez l'adresse http://www 
. votresite.com/ robotstats /vl.O /ins tall. php. 

Pour le moment, aucun bilan n'est disponible. Revenez sur 
l' interface d' administration quelques semaines apres la 
publication en ligne de votre site web afin de constater les visites 
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effectuees par les robots. RobotStats vous informe precisement de 
l'activite des robots sur votre site afin de verifier si votre site est 
correctement indexe dans les moteurs de recherche. 



9.2. Inscription dans les annuaires 

Un annuaire est charge de repertorier des sites web par categories. 
Chaque site est reference au sein de rubriques et sous-rubriques dans 
lesquelles on peut acceder a sa fiche d' informations incluant une courte 
description, eventuellement le nom du webmestre, etc. 

Les sites inscrits dans un annuaire sont verifies par le referenceur qui 
peut choisir d' accepter ou de refuser votre site web si celui-ci ne 
correspond pas aux criteres de qualites etablis par 1' annuaire. 

Generalement, les sites d' aspect trop personnels avec une charte 
graphique non soignee, sans nom de domaine, c'est-a-dire avec une 
adresse du type http://hebergeur.monsite.com ont peu de chances d'etre pris 
en compte. De plus en plus souvent, le referencement dans les annuaires 
est done dedie a des sites a vocation professionnelle, commerciale ou 
associative. 



Inscrire son site sur Voila 

Technique la plus simple qui contrairement aux moteurs de recherche ne 
demande pas de demarche specifique a effectuer sur votre site : 
l'inscription dans un annuaire. Sur Voila, le referencement est gratuit 
pour les pages personnelles creees avec le site. 

Procedez ainsi : 

1 Rendez-vous sur la page d'accueil a l'adresse www.voila.fr puis 
cliquez sur le bouton Pages Perso sitae en haut a droite (voir 
Figure 9.11). 

2 Cliquez sur le lien Annuaire afin d' acceder a 1' annuaire de pages 
persos propose par le site Voila. Cliquez sur le lien Enregistrer un 
site (voir Figure 9.12). 
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Figure 9.11 : Ajout d'un site dans I'annuaire Voila 
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Figure 9. 12 : Enregistrement d'un site personnel sur Voila 

3 Entrez un nom d'utilisateur et un mot de passe ainsi que l'adresse 
de votre site. Validez votre inscription. 

4 Votre site web sera present dans la categorie selectionnee lors de 
l'inscription. 



Classement des sites dans un annuaire 

Faire figurer son site sur les annuaires est tres complexe car le 
webmestre du site ne maitrise pas les donnees qui servent a I'annuaire 
pour classer ses resultats : titre, resume eventuellement, rubrique. II est 
done tres complexe, voire impossible, d'etre bien place sur un annuaire. 
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Meme si un annuaire n'est pas tres connu, si votre site y est 
reference, cela aura pour effet d'augmenter sa popularite globale et 
done son positionnement aupres de moteurs comme Google qui 
accordent une tres grande importance a ce critere. 



Referencer automatiquement son site web 

Referencer manuellement un site demande du temps, aussi certaines 
sites proposent de referencer automatiquement votre site dans plusieurs 
dizaines d'annuaires, generalement en contrepartie d'une banniere 
publicitaire. 

Le referencement automatique ne sera jamais aussi efficace qu'un 
referencement realise manuellement mais il peut constituer une premiere 
etape necessaire a la diffusion de votre site. A vous ensuite de surveiller 
les visites generees par ces differents outils pour optimiser le 
positionnement de votre site dans un second temps. 

Procedez ainsi : 

1 Ouvrez votre navigateur et entrez l'adresse 
www.referencement-automatique.net. II s'agit de l'un des 
rares sites encore entierement gratuit et n'imposant pas de 
banniere publicitaire. Cliquez sur le bouton Gratuit - 30 Annuaires 
afin de referencer gratuitement votre site web. 
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Figure 9. 13 : Referencement automatique et gratuit sur 30 annuaires 
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2 Dans la page suivante, choisissez la categorie de votre site. Deux 
options vous sont proposees selon le type de page web a 
referencer : Generaliste et Charme. Le mode de fonctionnement est 
similaire, mais les annuaires selectionnes different. 

3 Afin d'acceder a ce service, le site vous propose d'inserer une 
banniere publicitaire sur votre site en copi ant/coll ant le code 
indique dans le page web, neanmoins celle-ci n'est pas 
obligatoire. 

4 Entrez une adresse email ainsi que l'adresse de votre site web. Par 
defaut, la liste deroulante Categorie indique Divers mais celle-ci 
pourra etre modifiee ulterieurement. Cliquez sur le bouton 
Commencer le referencement. 
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Figure 9. 14 : Demarrage du referencement 

Un message apparait pour vous indiquer que la procedure a ete 
correctement prise en compte. Afin de demarrer le 
telechargement, rendez-vous dans votre messagerie et cliquez sur 
le lien de confirmation envoye par le site. 
L' etape suivante vous permet de selectionner les annuaires au sein 
desquels vous souhaitez apparattre ainsi que les differentes 
categories correspondant a chaque outil. 
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7 Cochez les options correspondant au site puis validez en cliquant 
sur le bouton Commencer le referencement. Le rapport de 
referencement s'affiche. Vous pouvez suivre en direct le processus 
d' inscription de votre site. 

8 Generalement, le processus d' inscription dans un annuaire 
necessite par la suite une confirmation par email. 

9.3. Surveiller sa position dans Google 

Google classe votre site selon la fiabilite des liens externes presents sur 
votre site. Ainsi, plus votre site est apprecie et reference par d'autres 
sites, plus le positionnement au sein de Google sera ameliore. 

Lors de la publication de votre site web, vous pouvez contacter des 
webmestres afin d'echanger des liens. Placez ces liens sur toutes les 
pages de votre site afin qu'ils contribuent a developper le PageRank. 
Plus celui-ci augmente (max. 10), plus Google accroit la position de 
votre site dans son outil de recherche. 



Installer PR weaver 

L'objectif de PRweaver est de vous aider a rechercher des sites du meme 
theme ou complementaire au votre possedant un PageRank interessant, 
plus particulierement pour optimiser votre position sur Google. 

Procedez ainsi : 

1 Connectez-vous a l'adresse www.prweaver.com afin de telecharger 
1' application. 

2 Lors de 1' installation, entrez une adresse email valide pour 
recevoir un code de validation necessaire afin d'activer le logiciel. 

3 Pour utiliser PR weaver, la barre d'outils Google doit etre 
installee sur votre ordinateur. Si vous ne la possedez pas, 
installez-la (voir Figure 9.15). 

4 Apres avoir insere votre cle Google dont la creation se deroule 
gratuitement a l'adresse www.google.fr, debutez la verification. 
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Figure 9. 15 : Telechargement de PR weaver 



Tester le pageRank de sa page 

1 Entrez l'adresse de votre site sous l'onglet PageRank d'URL afin 
d'afficher un rapport complet sur la popularite de votre site. 

2 Parmi les autres onglets destines a affiner le referencement, les 
backlinks permettent de visualiser les autres sites web pointant 
vers l'URL de votre site. 

3 Entrez votre adresse web et lancez la recherche pour connaitre 
instantanement le nombre de sites ayant mis un lien vers votre 
page. 

4 Indiquez l'adresse de votre site dans le formulaire dedie, puis 
cliquez sur le bouton Tester. N'oubliez pas de cocher 1' option 
adequate selon les parametres que vous souhaitez tester. 
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L' analyse de votre site s'effectue. Vous pouvez aller plus loin dans 
1' optimisation du site web afin de tester le chargement de la page ou 
nettoyer le code HTML pour un chargement plus rapide. Quelques 
astuces pour ameliorer le Page Rank du site s'affichent egalement en 
fonction des points negatifs apparus lors de V analyse. 



Afficher le PageRank de votre site 

Le site Free Page Rank vous propose d' afficher gratuitement votre 
PageRank sur votre site contre 1' insertion d'un logo et d'un lien vers le site. 

1 Connectez-vous sur le site www.free-pagerank.com/. Vous pouvez 
gratuitement afficher le PageRank de votre site. 
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Figure 9. 16 : Afficher le PageRank sur son site 

2 Choisissez un logo puis saisissez l'adresse de votre site web dans 
le champ URL. 

3 Cliquez sur le bouton Votre PageRank. Votre PageRank actuel 
s'affiche et un code apparait afin de l'afficher sur votre site web. 

4 Selectionnez le code puis choisissez Copier dans le menu 
contextuel. Ouvrez votre page web en mode Source et choisissez 
la commande Coller. 

5 Ouvrez un apercu de la page web dans le navigateur Internet. Le 
PageRank du site s'affiche. 



9.4. Comparer son positionnement 
avec des sites concurrents 

Afin d' avoir un apercu rapide de la position de votre site dans les outils 
de recherche, le logiciel Advanced Web Ranking se charge de lancer 
simultanement sur plusieurs moteurs une recherche avec des mots-cles 
lies au theme de votre site web. 

Installer Advanced Web Ranking 

1 Connectez-vous a l'adresse www.advancedwebranking.com/download 
.html afin de telecharger une version devaluation du logiciel 
Advanced Web Ranking. 

2 Pour telecharger la version Windows, selectionnez le premier lien 
avec un poids de 27,6 MB, incluant l'environnement Java 
indispensable au fonctionnement de 1' application. 

3 Double-cliquez sur 1' executable afin de lancer le module 
d' installation d' Advanced Web Ranking. Indiquez votre nom et une 
adresse email valide indispensable pour acceder a 1' application. Un 
numero de serie est envoye par mail, recopiez-le. 
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Figure 9.17 : Telechargement a" Advanced Web Ranking 
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Lancer une recherche simultanee 
sur plusieurs outils 

1 Creez un nouveau projet avec la commande Projet/Nouveau 
projet. La boite de dialogue Nouvel assistant de projet s'affiche a 
l'ecran. 

2 Activez l'onglet Moteurs de recherche. Selectionnez les moteurs 
a utiliser dans votre projet parmi les 300 proposes par defaut par 
le logiciel. Les plus grands moteurs tels que Google ou Altavista 
sont represented mais aussi d'autres outils de recherche 
internationaux coreens, japonais ou australiens utiles pour verifier 
rapidement un referencement mondial. 

3 Pour obtenir davantage d' informations sur le moteur selectionne, 
double-cliquez sur son nom. Cliquez sur le bouton Suivant afin de 
definir les options de mots-cles. 

4 Dans la boite de dialogue Nouvel assistant de projet, selectionnez 
l'onglet Mots-cles. Selectionnez des mots-cles relatifs au theme 
de votre site. 

5 Placez votre curseur dans le champ Mots cles. Choisissez une 
couleur au sein de la liste disponible afin de mieux reperer les 
resultats et la pertinence des mots-cles. 

6 Sous l'onglet URL, entrez l'adresse du site sans la mention 

http://. 

7 Cliquez sur le bouton Suivant puis nommez votre projet. 

8 Enregistrez les options selectionnees en cliquant sur le bouton 
OK. 

9 Dans 1' interface principale, lancez la requete en cliquant sur la 
petite fleche situee en haut a gauche. 

10 Le classement de chaque mot-cle dans les outils de recherche est 
visible au sein des onglets Rang actuel, Rang par mots-cles et 
Rang par moteur de recherche. 
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Figure 9. 18 : Apercu des resultats generes par Advanced Web 
Ranking 
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11 Selectionnez un outil de recherche et comparez les resultats 
obtenus avec les sites concurrents. Ajustez les balises meta et 
eventuellement le contenu de votre site afin d'optimiser votre 
positionnement. 

9.5. Atelier - Flash, un referencement 
specifique 

Flash constitue aujourd'hui la meilleure facon de creer des sites web 
interactifs et dynamiques. Neanmoins, les sites realises avec Flash 
souffrent d'un handicap majeurlie a la difficulte du referencement 
engendre par 1' absence de prise en compte du texte au sein des 
animations. 

Afin de contourner ces limites, il est neanmoins possible d'ajouter des 
balises meta efficaces au sein de la page HTML dans laquelle 
1' animation Flash est inseree et de placer et aj outer une nouvelle balise 
appelee <noembed>. 



Pour davantage d 'informations sur les balises meta, reportez- 
vous a la section Optimiser son site pour les outils de 
recherche de ce chapitre. 

Lors de la publication d'une animation Flash, le code insere dans 
la page HTML se presente de la facon suivante. Pour le visualiser 
dans un editeur web tel que Dreamweaver, activez l'onglet 
Fractionner : 

<object 

classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" 

s-c id="console" codebase="http: //download. macromedia 

.com/pub/ Shockwave /cabs /f lash/ swf lash 

X .cab#version=4, 0,2,0" width="155" height="294"> 

<param name=movie value="console_jogg.swf "> 

<param name=quality value=high> 

<param name="wmode" value="transparent"> 

<param name="menu" value="false"> 

<embed src="console_jogg. swf " quality=high 

pluginspage="http: //www. macromedia. com/ Shockwave 

sx /download/index. cgi?Pl_Prod_Version=ShockwaveFlash" 

S< type="application/x-shockwave-flash" name="console" 

X width="155" height="294"> 

</embed> 

</object> 
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2 Afin d'ameliorer le referencement de votre site en Flash, inserez 
une balise <noembed> dans votre page HTML. Cette balise 
contiendra un texte qui refletera le contenu de votre animation 
Flash. Sous le code necessaire a 1' integration de votre page web, 
inserez le script suivant : 

<noembed> Christohe Dupont - Graphiste et 

S< illustrateur - Animation Flash et 3D - Tutoriels, 

S»= nombreux articles, news </noembed> 

Ce texte sera aspire par les robots des outils de recherche qui se chargent 
de rechercher sur le Web les nouveaux sites qui apparaissent 
quotidiennement. Ce texte ne sera pas visible pour l'internaute ; il est 
done utilise uniquement a des fins de referencement. 

3 Vous pouvez egalement ajouter des commentaires afin d'enrichir 
davantage encore le texte de votre page web. Ces commentaires 
sont en effet pris en compte par certains outils afin de mieux 
classer votre site. 

4 Pour inserer un commentaire dans votre page HTML, utilisez les 
balises <! — et — > a l'interieur de la balise <body>. Ainsi, le 
code necessaire a 1' integration de 1' animation Flash se presentera 
de la facon suivante : 

<- - Christophe Dupont, animateur 3D, expert Flash et 

£< 3DSmax, graphiste publicitaire, CV et book en 

S>< ligne 

- - > 

<object 

classid="clsid:D27CDB6E-AE6D-llcf-96B8-4 4 4 55354 0000" 

S< id="console" codebase="http: //download. macromedia 

. com/pub/ Shockwave/ cabs /f lash/ swf lash 

K . cab#version=4, 0, 2, 0" width="155" height="294"> 

<param name=movie value="console_jogg. swf "> 

<param name=quality value=high> 

<param name="wmode" value="transparent"> 

<param name="menu" value="f alse"> 

<embed src="console_jogg. swf " quality=high 

pluginspage="http: //www. macromedia .com/ Shockwave 

s< /download/index. cgi?Pl_Prod_Version=ShockwaveFlash" 

s< type="application/x-shockwave-flash" name="console" 

S< width="155" height="294"> 

</embed> 

</object> 
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Publier et promouvoir son site web 



Afin que des visiteurs potentiels frequentent votre site, ils doivent savoir 
qu'il existe, ce qui n'est pas forcement une evidence puisque plusieurs 
milliers de pages web sont nouvellement referencees chaque jour. 

Pour sortir de l'anonymat, plusieurs methodes sont a votre disposition : 
discussion dans les forums, mise en place de partenariats avec des sites 
complementaires aux votres ou echange de bannieres publicitaires. 



10.1. Avant de publier 



Avant de vous lancer dans la publication de votre site, prenez le temps 
de verifier ces criteres determinants pour la reussite de votre site web. 



Les regies d'or a respecter 



Naviguez a plusieurs reprises au sein de votre site afin de verifier 
son organisation. Assurez-vous que les elements de navigation 
sont bien hierarchises en rubriques et sous/rubriques. Si 
necessaire, pour faciliter la navigation sur votre site, n'hesitez pas 
a cr6er un plan de site, c'est-a-dire une page HTML contenant 
toute l'arborescence de votre site web. 

Multipliez les acces au sein d'une meme page. Faites appel aux 
liens hypertextes et assurez-vous que la barre de navigation est 
presente sur chaque page. 

La navigation doit etre intuitive. Avant de publier votre site, faites 
tester sa navigation par votre entourage ; il est souvent difficile, 
apres de longues heures passees sur sa page web, d' avoir le recul 
necessaire pour reperer les eventuels soucis de navigation. 

Croisez les informations sur l'ensemble des pages de votre site, 
au lieu de tout grouper dans une seule page sur laquelle il sera 
obligatoire de revenir systematiquement pour poursuivre sa visite. 

Verifiez le poids de vos pages web afin de vous assurer que 
l'internaute ne passera pas plusieurs secondes devant une page 
vide lors du chargement, meme avec une connexion bas debit. 
Au-dela de 30 secondes de chargement, il est probable que 
l'internaute zappera vers un autre site. 

Pour optimiser le poids de vos pages, compressez chaque image 
au format GIF ou JPEG avant toute publication en ligne. Nettoyez 



470 



LE GUIDE COMPLET 



Avant de publier 



Chapitre 10 



le code HTML afin d'eviter les informations redondantes dans le 
code source de la page. 

£$* Pour davantage d' informations sur la compression d'images, 
renvoi reportez-vous au Chapitre 8, Optimiser ses images pour le Web. 

Si votre page contient une animation Flash, inserez une barre de 
prechargement afin que l'internaute sache precisement le temps 
restant avant l'affichage de l'animation. Si l'ecran de 
prechargement n'accelere en rien l'affichage de l'animation, 
connaitre precisement son etat d'avancement a tendance a faire 
patienter plus longtemps l'internaute. 

Veillez a la coherence graphique et a la lisibilite des informations. 
Rien de pire qu'un texte ecrit trop petit sur un fond sombre sur 
lequel l'oeil n'aura pas envie de s'attarder plus de quelques 
secondes. 

Utilisez systematiquement les memes composants dans chacune 
des pages du site tels que barre de navigation, en-tetes et pieds de 
page, copyright, etc. 

Supprimez toutes les sections "en travaux" du site pour ne pas 
donner 1' impression d'un travail inacheve. 

Apres avoir verifie tous ces criteres, votre site est pret a etre 
soumis au jugement des internautes. 



Optimiser le poids de sa page web 

Afin d' optimiser la vitesse de chargement de vos pages, Dreamweaver 
permet de determiner instantanement le poids de votre page et son temps 
de chargement selon la connexion utilisee. 



S" Pour davantage d' informations sur Vutilisation de 
NV0 , Dreamweaver, reportez-vous au Chapitre 4, Aller plus loin avec 
Dreamweaver. 

Procedez ainsi : 

1 Ouvrez la page HTML a optimiser au sein de Dreamweaver avec 
la commande Fichier/Ouvrir. En bas a droite de la page s'affichent 
sa resolution et son poids. 
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Figure 10. 1 : Le poids de la page apparait en bas de /'interface dans 
Dreamweaver 

Par defaut, la vitesse de connexion indiquee correspond a une 
connexion bas debit avec un modem de 56 Ko. Arm de 
personnaliser ces parametres, cliquez sur la commande 
Edition/Preferences. 

Dans la colonne Categorie, selectionnez Barre d'etat. En bas de la 
fenetre, selectionnez la vitesse souhaitee dans la liste deroulante 
Vitesse de connexion puis validez par un clic sur le bouton OK. 
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Figure 10.2 : Selection d'une vitesse de connexion 
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Une page web accessible a tous 

Si votre site s'adresse au grand public, verifiez que le temps de 
chargement avec une connexion de 56 Ko n'excede pas une trentaine de 
secondes. Meme si le haut debit se generalise, prenez le temps 
d'optimiser votre page afin qu'elle ne soit pas surcharged inutilement. 



4 Afin de supprimer les informations inutiles de votre code et 
gagner quelques kilooctets, faites appel a la commande de 
nettoyage HTML en cliquant sur le menu Commandes/Nettoyer 
le code XHTML. 

5 La boite de dialogue Nettoyer le code HTML/XHTML s'affiche a 
l'ecran. Cochez les elements a optimiser. II est conseille de 
supprimer les balises vides ainsi que les eventuelles balises 
redondantes. Pour gagner davantage de kilooctets, selectionnez la 
case de suppression des commentaires. Validez par un clic sur le 
bouton OK. 




Suppnmer Wsestecort^ 

Balises redondantes imbriquees 

D Commentaires HTML ne faisant pas partie de Dreamweaver 

D Marqueur special Dreamweaver 

□ Balise(s)L 
Options: combiner les balises de «cr*> imbriquees lorsque possble 

Afficherle journal a la fin 



rcnut^^ j 



Figure 10.3 : La boite de dialogue Nettoyer le code HTML /XHTML 

Une boite de dialogue indiquant le resume de nettoyage s'affiche 
a l'ecran afin de vous informer des elements supprimes. Le poids 
et le temps de chargement de la page web sont automatiquement 
mis a jour. 

Si vous avez utilise un logiciel d' edition externe tel que Word 
pour copier/coller le texte de vos pages web, activez la commande 
Commandes/Nettoyer HTML Word. 
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Dans la boite de dialogue Nettoyage du HTML Word, selectionnez 
la version de Word utilisee dans la liste deroulante Nettoyer le 
HTML provenant de. Dans les onglets Base et Detaille, cochez tous 
les elements puis cliquez sur le bouton OK. 



Nettoyage du HTML Word 



Base 



Det^le 



Nettoyer le HTML provenant de i Word version 2000 et ukei M 

0Supprimer les marqueurs specifiques a Word 

Nettoyer CSS 

Nettoyer les balises <font> 

Corriger les imbrications de balise s invalides 

0Definir couleur d'arrlere-plan \ #FFFFFF 

Appliquer le format source 

0Afficher rapport a la fin 



OK 



| Annuler 



Aide 



Figure 10.4 : La bolte de dialogue Nettoyage du HTML Word 

9 Le compte-rendu du nettoyage effectue apparait. Validez par un 
clic sur le bouton OK. 

10 Si vous possedez quelques notions de HTML, vous pouvez 
optimiser manuellement votre code avec la commande 
Fenetre/lnspecteur de codes destinee a supprimer manuellement 
les portions de code inutiles. 

11 Apres avoir effectue ces operations, veriflez le gain poids obtenu 
puis enregistrez votre page. 



REMARQUE 



Traquer les liens brises 

Dreamweaver dispose d'une fonction destinee a verifier les liens de 
votre page web, qu'ils soient internes, c'est-a-dire renvoyant vers 
d'autres pages de votre sites ou externes, pointant vers d'autres sites 
Internet ou des adresses email. Afin de lancer la verification de liens, 
cliquez sur la commande Site/Verifier tous les liens du site. Une fenetre 
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de resultat repertoriant tous les liens brises apparait a l'ecran afin de 
vous permettre de corriger les erreurs potentielles. 



10.2. Trouver un hebergeur 

Les solutions d'hebergement sont multiples : gratuites ou payantes, avec 
trafic illimite ou non, incluant une ou plusieurs technologies, etc. 



Payant ou gratuit 

Selon le type de site (personnel ou a vocation professionnelle) et 
l'adresse que vous souhaitez utiliser (nom de domaine ou adresse 
fournie par l'hebergeur), vous devrez opter pour un hebergement gratuit 
ou payant. 

Dans le cas des hebergements gratuits, prenez en compte les elements 
suivants avant de pubiier votre page : 

En contrepartie de la gratuite de l' hebergement, une publicite est 
generalement imposee sur le site web. II s'agit sou vent d'une 
banniere publicitaire qui s'affiche sur chacune de vos pages, le 
plus souvent sous forme de pop up. Vous n'aurez aucun droit de 
regard sur les publicit.es diffusees sur votre site, aussi veillez a ce 
que le type de publicite utilise ne soit pas susceptible de heurter le 
public de votre site web. 

Lors de la souscription a un hebergement gratuit, votre adresse 
Internet sera du type http://votrehebergeur/monsite. Une adresse 
generalement longue et peu evidente a retenir. 

Les hebergements gratuits ne vous offrent pas toujours certaines 
specifications techniques pourtant utiles telles que le support du 
PHP ou la possibility de faire appel a une base de donnees 
MYSQL, indispensable pour utiliser les nombreux scripts 
developpes dans ces technologies sur le Web. 

II peut done s'agir d'une solution interessante pour un site personnel ou 
si vous souhaitez faire simplement quelques tests et vous "faire la main" 
avant d'investir dans une solution plus professionnelle. 
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L'hebergement pay ant est indispensable pour un site professionnel. II 
vous permettra notamment de disposer de votre propre nom de domaine 
ainsi que d'un support technique efficace. Afin de faire le tri dans la 
jungle des offres tarifaires, verifiez les criteres suivants avant de vous 
lancer : 

L'espace disque disponible. Publierez-vous de nombreuses photos, 
videos ou de nombreux fichiers musicaux ? Si la reponse est oui, 
oubliez l'hebergement gratuit aux espaces disques tres limites. 

Le serveur mutualise. Le serveur mutualise est une tres bonne 
solution pour les sites ayant un trafic assez important, de l'ordre 
de 10 000 visiteurs par mois. Votre site sera stocke sur un serveur 
avec une quarantaine d'autres sites ; ainsi vous disposerez d'une 
bande passante tout a fait convenable. 

Le serveur dedie. Ce type de serveur est a reserver aux sites ayant 
enormement de visiteurs et tres gourmands en bande passante, 
dans le cas de telechargements frequents de musique ou videos 
par exemple. Dans ce cas, vous louez ou achetez un serveur qui 
sera entierement dedie a votre site. Selon les hebergeurs vous 
pourrez meme le configurer si vous le souhaitez. 

Les technologies utilisees. PHP et bases de donnees MYSQL 
constituent l'ecrasante majorite des hebergements proposes et 
restent a privilegier si vous souhaitez par la suite ajouter 
facilement des fonctionnalites gratuites pour votre site (forum, 
chat, newsletter, etc.). Ces technologies etant gratuites, 
contrairement a d'autres alternatives proposees par Microsoft, 
elles sont done largement privilegiees sur le Web et par les 
developpeurs. 

Les packs complets. Si vous debutez et souhaitez publier votre 
premier site web, les hebergements payants incluent des packs 
avec nom de domaine et support technique. 



ASTUCE 



Verifier l'hebergement propose par votre fournisseur d'acces 
a Internet 

Avant de chercher une solution d'hebergement sur Internet, verifiez si 
votre offre d'abonnement n'inclut pas un espace de quelques megaoctets 
destine a accueillir vos pages personnelles. 
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Ouvrir son espace gratuit chez Multimania 

Multimania, l'un des precurseurs de la creation web, propose d' ouvrir 
gratuitement sur son site un espace d'hebergement de 50 Mo en echange 
de bannieres publicitaires. Vous pouvez choisir de creer ensuite votre 
page web avec les outils en ligne mis a disposition par Multimania ou 
simplement transferer un site web concu avec une autre application 
grace au logiciel de transfert inclus. 

Creer un compte 

1 Ouvrez votre navigateur Internet et entrez l'adresse 
www.multimania.lycos.fr. La page d'accueil de Multimania 
apparait a l'ecran. Cliquez sur le bouton Creer un site. 
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Figure 10.5 : Hebergement gratuit sur le site Multimania 

Une nouvelle page apparait afin de vous presenter les conditions 
generales d' utilisation du service. Apres en avoir pris 
connaissance, cliquez sur le bouton Accepter. 
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Remplissez le formulaire d'enregistrement necessaire a toute 
inscription. Les informations avec un asterisque sont obligatoires. 

Indiquez une adresse email valide ; les identifiants de votre 
compte vous seront envoyes a votre adresse de messagerie. 

Dans la section Informations sur votre compte du formulaire, 
choisissez un identifiant et un mot de passe comprenant au 
minimum six caracteres et melangeant chiffres et lettres. 

Ces informations seront indispensables pour acceder a votre site 
personnel. Multimania propose une adresse web du type 
http://membres.lycos.fr/identifiant. Le choix de votre identifiant est 
done primordial puisqu'il sera utilise dans l'adresse de votre site. 



A 



ATTENTION 



Bien choisir son identifiant 

Le choix de votre nom d'utilisateur, egalement appele "identifiant", 
"pseudo" ou "login"selon les sites, est primordial. II vous sera demande 
a chaque connexion pour acceder a 1' interface d' administration de votre 
compte mais sera egalement utilise dans l'adresse de votre site web. 
Lors du choix d'un identifiant, assurez-vous qu'il sera facilement 
memorisable par vous-meme mais aussi par vos visiteurs. 



En cas d'oubli d' identifiant ou de mot de passe, choisissez une 
question "pense-bete" puis indiquez la reponse correspondante. 

En bas du formulaire, choisissez ou non de recevoir des 
informations publicitaires de la part de Lycos en cochant la case 
Oui ou Non. Recopiez le code de securite indique puis cliquez sur 
le bouton Inscription. 

Ouvrez votre messagerie, un mail de confirmation d' inscription a 
ete automatiquement expedie par Multimania. L'ouverture de 
votre compte sur Multimania ne pourra s'effectuer sans un clic sur 
le lien envoye par email. 
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10 Choisissez un mot de passe FTP, necessaire lors du transfert de 
vos fichiers vers le serveur de Multimania. Saisissez-le a deux 
reprises pour eviter toute erreur et optez comme precedemment 
pour un mot de passe de six caracteres minimum, compose de 
chiffres et de lettres. Recopiez le code securite puis cliquez sur le 
bouton Suivant. 
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Figure 10. 7 ; Configuration du compte FTP 



REMARQUE 



Publication avec le Web FTP 

Le Web FTP MultiMania est un outil integre a MultiMania destine a 
publier votre site a partir de votre ordinateur, sans faire appel a un autre 
logiciel. Son principal atout est la simplicite puisqu'il suffit d'etre 
connecte a Internet et d' avoir entre votre identifiant et votre mot de 
passe pour mettre a jour votre site web, sans qu'aucune autre 
configuration ne soit necessaire. 



11 Votre inscription est terminee. Un recapitulatif de vos 
informations personnelles telles qu' identifiant, mot de passe de 
votre compte et mot de passe FTP vous est envoye par email. 

12 Toute connexion a Multimania necessitera 1' entree de votre 
identifiant et de votre mot de passe. Conservez precieusement cet 
email afin de faire face a un eventuel trou de memoire. 
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13 Pour utiliser immediatement votre compte web, cliquez sur le 
bouton Commencer a utiliser mon compte Multimania 
maintenant. 

Publier son site web sur Multimania 
avec I'outil FTP integre 

Si vous avez deja cree un site personnel et souhaitez l'heberger sur 
Multimania, vous pouvez faire appel a l'aspirateur de sites, un service 
qui vous permet de transferer rapidement vos pages vers votre nouvel 
espace web. 

Procedez ainsi : 

1 Entrez vos identifiants puis cliquez sur le bouton Se connecter. 
Un resume des parametres de votre site s'affiche a l'ecran : espace 
disque disponible, statistique, etc. Vous pouvez maintenant 
publier votre site web. 

2 En bas de la page, cliquez sur le bouton WebFTP afin d'acceder a 
1' interface de transfert de pages mis a disposition par Multimania. 



REMARQUE 



Creer un site web avec Multimania 

Multimania dispose d'outils en ligne afin d'inserer textes, images et 
liens tres facilement en cliquant sur le bouton WebBuilder dans la section 
Outils en ligne. 



La page de presentation de I'outil web FTP apparait. Cliquez sur 
le bouton Ouvrir WebFTP (voir Figure 10.8). 

Une nouvelle fenetre s'affiche. Entrez de nouveau votre 
identifiant et votre mot de passe de connexion. Cochez la case 
Connexion automatique afin d'etre reconnu automatiquement lors 
de votre prochaine visite. 

Dans 1' interface WebFTP, selectionnez sur votre ordinateur les 
fichiers a transferer puis validez. Le transfert se lance 
automatiquement ; votre site est maintenant accessible a l'adresse 
http://membres.lycos.fr/identifiant. 



REMARQUE 



Ajouter de nouvelles f onctionnalites 

Apres publication de votre site, vous pourrez le modifier et y ajouter 
de nouveaux services disponibles sur Multimania, tels que compteurs de 
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visite ou sondages en ligne. Pour davantage d' informations, rendez- 
vous a l'adresse http://membres.lycos.fr/build/goodies. 



MultiMania 




Vous etes ici : Accutfl lycos • MultiMania > Outils en ligne 



WebFTP 

Editez, visualisez et publiez vos fichiers en ligne grace a notre WebFTP ! 



| ♦ Ouvrir WebFTP ! 



Publiez votre site en quelques clics ! 

Le WebFTP MultiMania est un outil complet qui vous permet de 
publier votre site sur MultiMania a partir de votre ordinateur 
sans utiliser de logiciel. 

> Haut de page 




Pas de configuration ! 

Le WebFTP MultiMania est accessible a partir de votre 
compte. Une fois lance le WebFTP se connecte 
automatiquement a votre espace disque sans necessiter la 
moindre configuration, Pas d'identifiant, de mot de passe ou 
d'adresse compliquee a se souvenir ! 

> Haut de page 




Previsualisez et modifiez vos pages en quelques ctics 

Le Webftp dispose de fonctions avancees qui vous permettent 
de visualiser chaque page et images. Editez vos pages et 
corrigez les en ligne d'un seul die ! 

» Haut de page 




Figure 10.8 : Acces a I'outil FTP de Multimania 



Utiliser l'aspirateur de sites 

1 Afin de copier sur Multimania un site deja present sur une autre 
plate-forme d'hebergement, selectionnez le bouton Aspirateur de 
sites dans le menu Outils en ligne. 
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2 Entrez les parametres FTP de votre compte, informations 
transmises par votre hebergeur, puis validez en cliquant sur le 
bouton Proceder a la copie. 

3 Le transfert est immediat ; votre site est accessible depuis 
l'adresse http://membres.lycos.fr/identifiant. 




Figure 10.9 : Configuration de I'aspirateur de sites 



10.3. Reserver un nom de domaine 

Le nom de domaine correspond a l'adresse de votre site. II constitue un 
element important de votre site web et doit done etre aussi explicite et 
facile a memoriser que possible. 

Si vous avez cree un site consacre au cinema et que vous ayez choisi un 
hebergeur gratuit, votre adresse sera vraisemblablement du type 
http://nomhebergeur.com/identifiant, evidemment moins facile a memoriser 
qu'une adresse www.cinema-frangais.com par exemple. 

Le cout d'enregistrement d'un nom de domaine est d' environ 15 euros 
par an mais varie selon r extension choisie (.fr, .com, .net, .org, etc.). 
Ainsi, les extensions moins couramment utilisees telles que le .eu sont 
generalement un peu moins cheres. 
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Si vous souhaitez egalement investir dans un hebergement pay ant, la 
plupart des services proposent 1' achat d'un nom de domaine en meme 
temps que 1' hebergement, parfois avec des prix tres interessants. 

Acheter un nom de domaine s'effectue en quelques minutes sur Internet 
par l'intermediaire de sites d'enregistrement. La regie du "premier arrive 
premier send" s' applique. Si le nom choisi est disponible, vous pouvez 
1' acheter immediatement. 

Le but de cette section est de vous guider pas a pas dans 1' achat de votre 
nom de domaine. 

1 Ouvrez votre navigateur Internet et entrez l'adresse 
www.neodomaine.com. 

2 Dans le champ Recherche de disponibilite situe sur la page 
d'accueil, entrez le nom choisi puis choisissez une extension. Huit 
extensions sont proposees au sein de ce site, les fameux . com ou 
.fr mais aussi .biz (business) ou .info, dedies aux services 
d' information. 
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Figure 10. 10 : Recherche d'un nom de domaine sur le site 
Neodomaine 
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Pas de caracteres speciaux dans un nom de domaine 
Les caracteres speciaux, accents ou lettres propres au francais tels que 
le C cedille ne peuvent pas etre utilises dans un nom de domaine. 



3 Cliquez sur le bouton Rechercher afin de verifier la disponibilite 
du nom de domaine. Si le domaine est disponible, choisissez la 
duree de depot (minimum 1 an, maximum 1 ans) puis enregistrez 
la commande. Plus la duree de depot est longue, plus les tarifs 
sont degressifs. 

4 Si le nom de domaine n'est pas disponible avec l'extension 
choisie, les autres extensions disponibles a 1' achat s'affichent. 




n«oD*p6t : !*ch#!che 



tismtm 



(hnma.|i*n&»*»<flin I E) 




| f.".i«j'rc«.yj.nwiT» I 

... ou a]out©2 un autre domaine a votre selection : 



Figure 10.11 : Affichage des disponibilites de nom de domaine 

De nombreuses entreprises ou particuliers achetent plusieurs noms de 
domaine. II est d'ailleurs souvent conseille aux entreprises qui achetent 
un nom de domaine avec l'extension .com d'investir egalement les 
extensions . net et . org. II n'y a pas pour le moment de restrictions sur 
le nombre de noms de domaine que vous pouvez posseder. 

5 Cochez le(s) nom(s) de domaine selectione(s) puis cliquez sur le 
bouton Commander maintenant. 
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6 Si vous effectuez votre premiere commande sur le site Neodomaine, 
vous allez devoir creer votre compte en cliquant sur le bouton 
Creer un compte. 

7 Choisissez un identifiant, par exemple la premiere lettre de votre 
prenom suivie de votre nom de famille, afin d'etre certain que 
r identifiant n'est pas deja enregistre, ainsi qu'un mot de passe. 

8 Remplissez le formulaire afin d'entrer vos coordonnees 
personnelles. 

9 Conservez les informations de DNS (Domaine Name Serveur = 
Serveur de nom de domaine) de Neodomaine si vous ne 
connaissez pas les DNS de votre hebergeur. Cliquez sur le bouton 
Verifier ma commande. Ces informations sont necessaires pour 
que le nom de domaine soit redirige automatiquement vers les 
pages de votre site web. 

10 Le site Neodomaine propose un systeme de paiement entierement 
securise. Afin de verifier que le paiement est protege, un petit 
verrou doit s'afficher dans Tangle inferieur droit de votre 
navigateur. 
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Figure 10. 12 : Achat d'un nom de domaine en ligne 
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11 Une confirmation de reservation vous sera envoyee par email dans 
les jours qui suivent votre commande. 

12 Le site Neodomaine propose egalement de configurer cinq adresses 
email et configurer de nouvelles adresses du type 
webmaster@mondomaine.com. 

13 Ce service peut egalement vous etre propose par le biais de votre 
hebergeur. Pour toute information, consultez le service technique 
ou la FAQ (Foire aux Questions). 



REMARQUE 



Nom de domaine et hebergement 

Lors de votre enregistrement, les informations de DNS vous seront 
demandees. Celles-ci dependent de votre hebergeur, considere comme le 
responsable technique du site web et charge de realiser les manipulations 
necessaires pour que les pages de votre site pointent vers le nom de 
domaine choisi. En tant que webmestre, vous etes considere comme 
responsable administratif et responsable du contenu insere. 



10.4. Transferer ses pages par FTP 

Si votre editeur web ou votre hebergeur ne contient pas de logiciels FTP, 
vous devrez faire appel a une application autonome. Le logiciel FTP est 
indispensable pour transferer les fichiers situes sur votre ordinateur vers 
le serveur de votre hebergeur. 

Pour realiser cette operation, vous pouvez faire appel au logiciel 
WS_FTP Pro dont vous trouverez une version d' evaluation gratuite sur 
le site de 1' editeur. 



RENVOI 



Pour davantage de details sur le transfert de fichiers avec le 
FTP integre de Deamweaver, reportez-vous au Chapitre 4, 
Aller plus loin avec Dreamweaver. 



Installer WS FTP 

1 Ouvrez votre navigateur et entrez l'adresse www.ipswitch.com. 
Cliquez sur le lien Frangais situe en haut a droite de V interface 
puis choisissez le lien WS FTP Professionnal 2006. 
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Figure 10. 13 : Achat d'un nom de domaine en ligne 

Cliquez sur le lien Evaluation afin de telecharger une version de 
demonstration en francais d'une duree de 30 jours. La version 
finale est disponible en ligne au prix de 50 € environ. 

Completez un court formulaire d' inscription avec votre email afin 
d'acceder a la page de telechargement du logiciel. 

Double-cliquez sur l'executable puis cochez le bouton radio 
J'accepte les conditions d'utilisation afin de poursuivre le 
processus d' installation. 

Modifiez si necessaire le repertoire d' installation par defaut en 
cliquant sur le bouton Parcourir puis cliquez sur le bouton 
Suivant. A la fin de 1' installation, cochez la case Lancer WS 
FTP Pro puis cliquez sur le bouton Terminer afin d'executer le 
logiciel. 
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Figure 10.14 : Installation de WS FTP Pro 



Configurer WS FTP 

1 Au premier demarrage de WS FTP, cochez le bouton radio Activer 
plus tard. Cliquez sur le bouton Suivant. 

2 L' Assistant Connexion se lance automatiquement afln de vous 
aider a configurer votre connexion vers votre serveur web. 
Cliquez sur le bouton Suivant. 

3 Indiquez le nom de votre site, par exemple Mon CV en ligne. 
Cliquez sur le bouton Suivant. 



1 *' Jl 


Nom du site 

Le Nom du site est une etiquette qui vous aide a Identifier ce site 
utter ietrernent 

Par exemple : 

■ Mon site de ventes aux enchetes 

■ Mon ate Web personnel 

Ce rem apparait quand vous cliquez sur Connecter en haut a 
gauche. 




Ngmdujla 
[MonCVsntgm 



< Ptfettfrnt | s.u«nl > | Amdei 



Figure 10.15 i 

Configuration 
d'un compte 
avec WS FTP 
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4 Dans la liste deroulante Type de connexion, selectionnez FTP. 
Cliquez sur le bouton Suivant. Par defaut, sauf indication 
contraire de votre hebergeur, conservez la mention FTP Dans le 
champ Adresse du serveur. 

5 Indiquez 1' adresse du serveur FTP fournie par votre hebergeur, 
par exemple ftp.online.net. Cliquez sur le bouton Suivant. 

6 Indiquez votre nom d'utilisateur et votre mot de passe, des 
elements egalement fournis par votre hebergeur. Cliquez sur le 
bouton Suivant. 

7 Un recapitulatif des informations precedemment entrees apparait 
a l'ecran. Si vous etes satisfait, cliquez sur le bouton Terminer. 
Pour modifier les informations entrees, cliquez sur le bouton 
Precedent. Par defaut, la case Connecter a ce site est cochee. 




— 



Terminer 



Si les informations suivantes sort correctes, cliquez sur Terminer 
pour creer le site. 

Si vous ne voulez pas vous connecter a ce serveur FTP, 
deselectionnez I'option Connecter a ce site. 

■ Nom de connexion : Mon CV en Igne 

■ Adresse du serveur : ftp.onlne.net 

■ Nom (futHisateur : webmasterflJmonsite.net 
• Mot de passe : *•«•••• 

RAPPEL : Vous pouvez desormais ouvrir ce site a I'aide du bouton 
Connecter dans la barre d'outils principale de Pappltation. 
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Figure 10. 16 : Recapitulatif des informations de configuration 

Le connexion est effectuee immediatement, il ne reste plus qu'a 
transferer les fichiers situes sur votre ordinateur vers le serveur de 
votre site web. 



A 



MENTION 



Desactiver votre pare-feu 

Si vous possfSdez un pare-feu (en anglais firewall) destine a proteger 
votre ordinateur, assurez-vous d' avoir autorise la connexion de votre 
logiciel FTP. Dans le cas contraire, l'acces pourrait etre bloque. 
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9 Afin de transferer vos fichiers, selectionnez-les sur votre disque 
dur dans la colonne de gauche puis deplacez-les dans la fenetre a 
droite par un glisser deplacer ou en cliquant sur la fleche verte 
dirigees vers la droite. 
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Figure 10.17 : Transfert de fichiers avec WS FTP 

10 Votre site est en ligne. Pour mettre a jour vos pages web, il suffira 
de transferer chaque nouvelle version de fichiers avec WS FTP. 



10.5. Faire appel a une regie 
publicitaire 

Afin de se faire connaitre sur le Web, vous pouvez faire appel aux 
bannieres publicitaires. II s'agit d'images animees avec l'adresse de 
votre site, destinees a promouvoir votre site. 

Pour vous y aider, plusieurs regies publicitaires assistent les webmestres 
pour echanger leurs bannieres avec d'autres sites au theme similaire 
egalement inscrits sur le site. 
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Inscription sur le site 

1 Ouvrez votre navigateur et rendez-vous a l'adresse http://hipub 
.hiwit.org/. II s'agit d'un service gratuit destine a echanger des 
bannieres avec d'autres sites. Cliquez sur le bouton Hipub situe 
dans le menu a gauche. 



REMARQUE 



- 
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Figure 10. 18 : Echange de bannieres sur le site Hipub 

En bas de page, cliquez sur le lien Inscription. Remplissez un 
formulaire d' inscription avec un nom d'utilisateur et un mot de 
passe necessaires a votre identification sur le site. Indiquez une 
adresse email valide. Afin de valider les informations entrees, 
cliquez sur le bouton Inscription. 



Fonctionnement d'une regie publicitaire 

La plupart des regies publicitaires proposent un ratio l:l, c'est-a-dire 
que pour un clic de souris genere par une banniere inseree sur votre site, 
vous gagnez un clic pour votre site web. Aucune limite de temps n'est 
imposee pour recuperer tous les clics acquis lors des echanges de 
bannieres. 
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3 Afin d'acceder au service, cliquez sur le bouton Acces gestion du 
service situe en bas de la page Hipub. Cliquez sur le bouton 
Inscription afin d'acceder a la page de configuration. 

Parametrer I'echange de bannieres 

1 Dans le formulaire de configuration, indiquez tout d'abord l'URL 
de votre site, c'est-a-dire son adresse Internet du type www.monsite 
.com. 

2 Indiquez egalement 1' adresse de votre banniere, envoyee 
prealablement par FTP sur votre site web. Par exemple,si 1' image 
de la banniere se trouve a la racine du site, 1' adresse de la 
banniere sera du type www.monsite.com/banniere.gif. Son format doit 
imperativement etre de 468 pixels de large sur 60 de haut. 
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Figure 10. 19 : Insertion des informations de configuration 



Pour davantage d' informations sur la creation d'une banniere 
animee, reportez-vous au Chapitre 8, Optimiser ses images 
pour le Web. 

Inscrivez un texte alternatif de votre banniere. Ce texte s'affichera 
sous forme d'info bulle lors du passage de la souris sur la 
banniere. 
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Cochez le bouton radio correspondant a la categorie de votre site 
parmi la dizaine de themes proposes. Indiquez les categories de 
sites autorisees a afficher votre banniere. 

Dans la section suivante, definissez les sites autorises a afficher 
votre banniere. Par defaut, toutes les categories sont cochees. 

Cliquez sur le bouton Inscription afin d'enregistrer les 
informations entrees. Un message de confirmation apparait. 



Insertion du script dans la page web 

1 Afin d' afficher la banniere animee des sites partenaires sur votre 
page, il est necessaire d'inserer un script dans la page web. 

2 Maintenez le bouton de la souris enfonce et selectionnez le code 
situe dans la zone de texte. Cliquez du bouton droit et 
selectionnez Copier dans le menu contextuel. Ce code permet 
d' afficher les bannieres des sites egalement inscrits sur HiPub. 
N'y apportez aucune modification afin que le service fonctionne 
correctement. 
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Figure 10.20 : Code Hipub a copier/coller dans la page web 

Ouvrez un editeur web tel que Deamweaver et selectionnez la 
commande Fichier/Ouvrir. Activez l'onglet Fractionner. 

Placez votre curseur a l'endroit ou vous souhaitez inserer la 
banniere en mode Apercu puis reperez l'endroit correspondant en 
mode Source. Cliquez du bouton droit et choisissez la commande 
Coller afin d'inserer le code fourni par Hipub. 
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REMARQUE 



Bien placer une banniere animee sur une page web 

Une banniere publicitaire se place generalement en haut de votre site, 
a l'endroit le plus visible pour l'internaute. Si votre banniere n'est pas 
suffisamment visible (en bas de page par exemple), votre compte HiPub 
risque d'etre automatiquement ferme. 



5 Aucune image n'est visible a ce stade de l'operation car la page 
doit etre lue dans un navigateur Internet afln d'afficher un apercu 
de la banniere inseree. A chaque chargement de la page, une 
banniere differente sera automatiquement generee. 
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Figure 10.21 : Insertion du code Hlpub dans une page web 

6 Enregistrez la page avec commande Fichier/Enregistrer. Lancez 
un apercu avec la commande Apergu dans le navigateur. Publiez 
votre page en ligne a l'aide d'un outil FTP. 




Figure 10.22 : Apercu de la banniere dans le navigateur web 
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10.6. Etablir des partenariats 
avec d'autres sites 

De nombreux moteurs de recherche dont Google prennent en compte le 
nombre de liens externes pointant vers votre site. Google classe les sites 
selon leur popularite ; le nombre de liens externes pointant vers votre 
site est considere comme un gage de qualite. 

Afin d'ameliorer vote classement, vous pouvez proposer a d'autres 
webmestres de mettre en place un echange de liens pour optimiser votre 
trafic. Plus le nombre de liens sera importants, plus votre Page Rank, 
c'est-a-dire la popularite de votre site, sera accrue. 



RENVOI 



Pour davantage d 'informations sur le Page Rank, reportez- 
vous au Chapitre 9, Referencer son site web. 



Proposer un echange de liens 
grace a WebRankinfo 



Ouvrez votre navigateur et entrez l'adresse 
www.webrankinfo.com. II s'agit d'un site web destine a vous 
aider dans la recherche de sites susceptibles d'inserer un lien vers 
votre page web. Cliquez sur le bouton Outils afin d'acceder aux 
outils destines a optimiser la visibilite de votre site. 




Figure 10.23 : Apercu de la banniere dans le navigateur web 
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Publier et promouvoir son site web 



2 Dans le menu Backlinks, cliquez sur Echange de liens. Entrez 
l'adresse de votre site dans le champ Votre URL. Cliquez sur le 
bouton Lancer la recherche. 

3 La liste des sites offrant un lien vers votre site s'affiche, ainsi 
qu'une liste de sites inserant des liens vers un site analogue a 
celui de l'adresse choisie. 

4 Cliquez sur ces liens afin d'evaluer leur pertinence. Contactez 
directement le webmestre afin de lui proposer un echange de 
liens. 

Utiliser les Google Groupe 

Google Groups vous permet de rencontrer facilement d'autres 
internautes passionnes par un meme theme. Ce service s'avere done 
particulierement pratique pour rencontrer d'autres webmestres 
potentiellement interesses par l'echange de liens. 

1 Rendez-vous a l'adresse http://groups.gOOgle.fr/. Cliquez sur le lien 

Parcourir les groupes par categories. 
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Figure 10.24 : Le site Google Group 

Selectionnez le sujet correspondant a votre site. Vous pouvez 
egalement effectuer une selection par langues, par activites (plus 
l'activite est elevee, plus le nombre de participants est important) 
et par regions. 
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3 Affinez votre recherche en cliquant sur les sous-rubriques qui 
s'affichent ; une liste de groupes apparait sous la liste des 
categories. 

4 Une courte description du groupe ainsi que le nombre de 
membres inscrits apparait. Privilegiez de preference les groupes 
"actifs" pour augmenter vos chances de reussite. 

5 Lorsque vous avez trouve un groupe qui vous convient, cliquez 
sur son nom dans la liste des groupes. Afin d'acceder au groupe, 
vous devez imperativement posseder une adresse Gmail, la 
messagerie de Google, ou prendre contact directement avec le 
moderateur du groupe. 

6 Evitez d'envoyer un message publicitaire des votre inscription. 
Prenez le temps d' observer le fonctionnement du groupe avant de 
presenter votre site. Si celui-ci correspond a la cible choisie, vous 
avez toutes les chances d' augmenter rapidement le nombre de 
visiteurs grace au bouche a oreille. 
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Cette selection de sites vous aidera dans la creation de votre site 
Internet. Vous trouverez tous les outils necessaires pour reussir votre 
entree sur le Web. 



11.1. Creer et gerer un blog 



Les blogs possedent maintenant leurs sites dedies, de la creation au 
referencement. 



Les plateformes de blog 

www.20six.fr 

Hebergement gratuit ou payant (3 ou 7 euros par mois). Beaucoup de 
fonctionnalites de personnalisation. 







_ rfgfc -.. 



Figure 11.1 : www.20six.fr 

www.over-blog.com 

Gratuit avec une fonction album photo et une interface conviviale. 
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Figure 11.2 : www.over-blog.com 

www.skyblog.com 

La plate-forme de blog privilegiee des adolescents. 




Figure 11.3 : 

www. skyblog. com 
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www.typepad.fr 

Payant de 5 a 15 euros par mois selon les options choisies. Blog 
complet, veritable solution professionnelle avec nom de domaine inclus. 




Figure 11.4 : www.typepad.fr 

www.viabloga.com 

Hebergement gratuit pendant trente jours, au-dela 5 euros par mois. 





Creez voire site ! 




A pp.: Nos pffres I ■ 















Figure 11.5 : www.viabloga.com 
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www.blogger.com 

Une plateforme de blog gratuite et sans banniere publicitaire pour les 
debutants, mais les fonctionnalites restent limitees. 







Blogger 




Figure 11.6 : www.blogger.com 

http://spaces.live.com 

Plate-forme gratuite de Microsoft, avec de nombreuses fonctionnalites 
pour partager des photos, communiquer avec MSN Messenger, etc. 




Figure 11.7 : http://spaces.live.com 
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www.zeblog.fr 

Gratuit avec de nombreuses interfaces pour personnaliser 1'apparence de 
votre blog. 
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Figure 11.8 : www.zeblog.fr 

www.hautetfort.com 

Version gratuite avec 30 Mo d'espace disque, ou payante a partir de 
5,90 euros par mois, avec un espace disque de 250 Mo et un support 
technique (voir Figure ll. 9). 

www.blogspirit.com 

Blog pay ant a partir de 5,90 euros par mois pour 250 Mo d'espace 
disque, proposant une interface agreable (voir Figure ll.lO). 
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Figure 11.9 : www.hautetfort.com 
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Figure 11.10 : www.blogspirit.com 
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Les outils de creation de blog 

www.dotclear.net 

Logiciel gratuit et en francais pour creer un blog de A a Z. Un 
hebergement avec PHP et MySQL est indispensable. 
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Figure 11.11 : www.dotclear.net 

http://wordpress.org 

Outil de blog gratuit (anglophone) avec une interface minimaliste simple 
d'emploi (voir Figure ll. 12). 

www.noahgrey.com/greysoft 

Outil anglophone de creation de blog et de journal en ligne (voir 
Figure 11.13). 
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Figure 11.12 : http://wordpress.org 
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F/gure 1 1. 13 : www. noahgrey. com/greysoft 
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Les annuaires de blog 

http://blogsearch.google.fr/ 

L'annuaire de blog de Google. 
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Figure 11.14 : http://blogsearch.google.fr/ 

www.etoile-blog.fr 

Un annuaire de blog en francais avec un systeme de notation (voir 
Figure ll. 15). 

www.annuaire-blogs.net 

L'un des annuaires francais les plus riches avec plus de trois mille blogs 
references (voir Figure 11.16). 
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Figure 11.15 : www.etoile-blog.fr 
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Figure 11.16 : www.annuaire-blogs.net 



LE GUIDE COMPLET 509 



Chapitre 1 1 



Webographie 



www.biogonautes.com 

Le guide des blogs proposant sur sa page d'accueil la liste des derniers 
sites mis a jour. 
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Figure 11.17 : www.blogonautes.com 

www.boosterblog.com 

Classement de blogs selon les votes des internautes. 
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Figure 11.18 : www.boosterblog.com 
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www.blogwise.com 

Annuaire de blogs internationaux avec un classement par pays. 
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Figure 11.19 : www.blogwise.com 



1 1 .2. Les outils gratuits 

II existe encore sur le Web de nombreux logiciels permettant de creer un 
site web gratuitement, puis de l'enrichir grace a des elements interactifs, 
tels que des compteurs ou des forums. 
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Les logiciels de creation 

www.cariboost.fr 

Editeur web en francais avec logiciel FTP integre. 
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Figure 11.80 : www.cariboost.fr 

www.nvu.com 

Editeur web anglophone, qui n'est pas sans rappeler l'interface 
Dreamweaver de Macromedia. 
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Figure 11.21 : www.nvu.com 

www.gimp-fr.org 

Logiciel de retouche d' images complet proposant de nombreux effets 



speciaux. 




Figure 11.22 : www.gimp-fr.org 
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Les ressources pour un site web 

www.easycreation.com 

Grand choix d' interfaces HTML et Flash pour sites web. 




Figure 11.23 : www.easycreation.com 

www.fontfoundry.com 

Large choix de polices libres de droit (voir Figure 1 1 .24). 

www.phpbb-fr.com 

Forum en PHP a integrer sur un site (voir Figure ll. 25). 




Figure 11.24 : www.fontfoundry.com 
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Figure 11.25 : www.phpbb-fr.com 
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www.moncompteur.com 

Large choix de compteurs permettant de connaitre le nombre de 
visiteurs sur un site web. 




Figure 11.26 : www.moncompteur.com 

www.xiti.com 

Statistiques relatives aux sites web. Version gratuite ou payante. 



cm 







is: 



Figure 11.27 : www.xiti.com 
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www.webdiz.com 

Nombreuses ressources gratuites pour webmaster : livres d'or, 
compteurs de visites, formulaires de contact, newsletters, etc. 
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Figure 11.28 : www.webdiz.com 

1 1 .3. Les tutoriels web et le graphisme 

www.commentcamarche.net 

Une reference incontoumable pour mieux comprendre le vocabulaire 
Internet et informatique en general. 
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Figure 11.29 : www.commentcamarche.net 

www.allhtml.com 

Nombreux tutoriels sur les technologies employees sur Internet et 
quelques scripts. 
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Figure 11.30 ; www.allhtml.com 
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www.joliespages.com 

Apprenez a realiser de "jolies pages" en observant les realisations de 
plusieurs dizaines de sites web classes par couleur. 
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Figure 11.31 : www.joliespages.com 

www.fairedelor.com 

De nombreux effets et retouches d' images a realiser avec Photoshop ou 
Photoshop Elements. 
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Figure 11.32 : www.fairedelor.com 
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1 1 .4. Les scripts prets a I'emploi 

www.editeurjavascript.com 

Plusieurs centaines de scripts JavaScript classes par theme et prets a 
I'emploi. 




Figure 11.33 : www.editeurjavascript.com 

www.comscripts.com 

Nombreux scripts PHP a copier-coller, tels que des sondages, des chats, 
des espaces membres, etc. (voir Figure 1 1 .34). 

www.phpscripts-fr.net 

Plus d'une centaine de scripts PHP prets a I'emploi (voir Figure ll. 35). 
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Figure 11.34 : www.comscripts.com 
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Figure 11.35 : www.phpscripts-fr.net 
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1 1 .5. Les ressources pour Flash 

www.flashkit.com 

Une reference anglophone a consulter pour progresser avec Flash et 
profiter de nombreuses animations mises a disposition. 
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Figure 11.36 : www.flashkit.com 

www.flashxpress.net 

Portail Flash avec de nombreuses ressources Action Script et quelques 
tutoriels (voir Figure ll. 37). 

http://flash-france.com 

Tutoriaux, astuces, animations Flash a telecharger, un incontournable a 
visiter pour en savoir plus sur Flash (voir Figure 11.38). 
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(SBlog FXP 

"60, Unite for Children" : un livre beau et utile a la fois ! 
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Figure 11.37 : www.flashxpress.net 




Figure 11.38 : http://flash-france.com 
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1 1 .6. L'hebergement et la reservation 
de noms de domaines 

www.landl.fr 

Pack proposant hebergement et reservation de noms de domaines a 
partir de 12 euros par an environ. 
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Figure 11.33 : www. 1and1.fr 

www.netavous.fr 

L'un des rares hebergeurs a proposer un espace disque et un trafic 
illimite a partir de 89 euros par an. 
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Figure 11.40 : www.netavous.fr 

www.gandi.net 

Reservation de nom de domaine a partir de 15 euros par an environ. 




Figure 11.41 : www.gandi.net 
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www.hebergement-gratuit.com 

Hebergement gratuit de 10 Mo, avec prise en charge de PHP. 
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Figure 11.42 : www.hebergement-gratuit.com 

1 1 .7. Les outils de recherche 

www.google.fr 

La reference des outils de recherche (voir Figure 11.43). 

www.mozbot.fr 

Un outil de recherche francophone assimile a un Google 
"personnalisable", avec de nombreuses options supplementaires (voir 
Figure 11.44). 
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Figure 11.43 : www.google.fr 
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Figure 11.44 : www.mozbot.fr 

www.altavista.fr 

Un moteur de recherche avec quelques petits plus, tels que le 
dictionnaire multilingue Babylon. 
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Figure 11.45 : www.altavista.fr 

www.voila.fr 

Annuaire francophone avec classement par theme. 



voila 
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1 1 .8. Les sites des editeurs de logiciels 

www.adobe.fr 

Editeur des principaux outils web du marche tels que Dreamweaver, 
Flash ou Photoshop Elements. 



w 



Adob« solutions produhs support commuiiautes societe telecharger store 



C Voire compte Contact France (moatier) 
CHERCHER 




lib£rez VOTRE CREATIVITY 

A exploiter sans moderation 



Solutions et produits 



Telecharge; Adobe Reader et Flesh Player 



,< 



Secteurs cTactivit* 

Education 
Services financiers 
Administration 
Sciences de la vie 
Industrie 
Telecommunications 

Solutions 

Conferences Web 
Formation et 

e-learning 

Photo et video grand 
public 

Photograph,* 
professionnelle 
Publication imprimee 
Publication veb 
RIA (Rich Internet 
Applications) 
Services de gestion 
de processus 
Terminaux mobiles 
Video et audio 

Voir les solutions par 
secteurd'activft£ » 



Produits 

Gimme Acrobat 
After Effects 
ColdFusion 



Illustrator 
InOesign 



Voir tout, les products 



Labs 



Cros plan sui Hash Lite" 

DScouvrez comment Adobe Flash 
Lite 3 stimule la creation 
duplications et de contenus 
attrayanls pour les terminaux 
mobiles. 



Adobe Nouveairtes d" Adobe Labs * 

Telechargez les demieres 
versions beta d'Adobe AIR et de 
Flex 3, ainsi que la version 
preliminaire d'AQobe Media 
Player 

Essayez Adobe Media Player' 

Cette nouveiie technologie de 
diffusion de videos sur Internet 
vous permet de visionner des 
films ou et quand bon vous 
semble. 



Adobe Creative Suite 3 
Logiciels pour I'lmpression, le 
web, les terminaux mobiles, les 
supports interacts, la video, etc. 
Quelle edition vous convient le 
mieux? 

Le catalogue des Solutions 
Pattenaires Adobe 2007' 

DScouvrez le monde des 
solutions qu'Adobe et ses 
Partenaires peuvent proposer a 



Creative Suite J 
Design Premium 

Produisez du 
contenu innovant 
pour I'lmpression, 
le >eb et lei 
terminaux mobiles. 
Corf.rn.lfider. 
Creative Suite 3 
Web Premium 



Oct. 



: I I. 



conception et au 
developpement 
web unt dimension 
extraordinaire. 
Commander. > 

Adobe Store 

Achat de licences en volume 

Autres moyens d'acheter 



Pole de < 

Pour les professionnels de la 
creation veb, de I'lmpression 
et da la video numerlque. 

Pole de deveioppement 

Des Cornells, techniques et 
autres ressources pour les 
developpeurs. 



Temoignages de clients 



Figure 11.47 : www.adobe.fr 



www.erain.com 



Figure 11.46 : www.voila.fr 



s 

Editeur de Swift 3D, logiciel permettant de creer des animations en 3D 
"exportables" au format Flash. 
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Figure 11.48 : www.erain.com 

www.photo-to-dvd.com 

L'editeur Wondershare propose sur ce site des applications permettant 
de realiser des albums photos pour le Web (voir Figure 1 1 .49). 

www.swishzone.com 

Logiciels d' edition audio, video et photo generant des animations au 
format Flash (voir Figure ll. 50). 
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Figure 11.43 : www.photo-to-dvd.com 
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Figure 11.50 : www.swishzone.com 
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Notes Notes 



Passionnee par les nouvelles 

technologies des I'emergence d'lnternet 

dans les annees 90, Karine Warbesson 

cree son premier site web consacre a la 

retouche photo en 1998. Journaliste pour la presse 

informatique, elle est notamment specialists dans le 

domaine de la photographie numerique ainsi que dans la 

creation de sites Internet multimedia bases sur la technologie 

Flash . 

Plus d'informations sur le site www.sourcehtml.com, 

Creez votre site web 

Le Guide Comptet : la meilleure fa$on de faire le tour du sujet ! 

La creation de site web n'aura bientot plus de secret pour vous ! De la creation 
d'un blog au referencement de votre site, apprenez a creer votre propre site 
Internet ! 



Le tour com p let 
du sujet traite 



La pratique 
par I'exemple 



L'approfondissement 
a trovers des exercices 
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Blogger 

Adobe Dreamweaver 
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Les kits graphiques 
HTML 

Les scripts prets a 
I'emploi 

Les animations Flash 

Du Flash sans Flash 
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.e referencement 

La publication 
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Internet 

Creez un carnet de 
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Publiez votre 
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Flash sur votre site 

Etablissez des 
partenariats avec 
d'autres sites 
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